I'm currently working on a template that includes a button. The goal is to have a pop-up box appear when the button is clicked.
However, I've encountered an issue - I can't figure out how to center the button and pop-up box or adjust the code accordingly. Also, when I click "close" on the pop-up box, it doesn't close as expected.
Here's the link to the jsfiddle for reference: http://jsfiddle.net/FK9TY/
If anyone could provide some assistance, I would greatly appreciate it!
<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>