ボタンを含むテンプレートがあります。このボタンをクリックすると、ポップアップ ボックスが表示されます。
私が直面している問題は、ボタンとポップボックスを中央に移動してコードに近づく方法が見つからないことです。ポップボックスを閉じるをクリックすると、ポップボックスが閉じます。
ここに jsfiddle があります: http://jsfiddle.net/FK9TY/
誰か親切に助けてくれますか?
<html>
<head>
<title>Page</title>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<style type="text/css">
.Richard {
display: none;
background-color: #FF58C3;
color: #000;
padding: 0 5px;
width:500px;
height:500px;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function($) {
$("#ClickMe").click(function(e) {
e.preventDefault();
/*if (.attr("data-display") == "visible") {
};*/
$("#moveableBox").fadeToggle();
});
$( "#moveableBox" ).draggable({ handle: "#moveBox" });
});
</script>
</head>
<body>
<button id="ClickMe">Click Me</button>
<div id="moveableBox" data-display="hidden" class="Richard">
<div id="moveBox">a</div>
</div>