I have two buttons that trigger the appearance of a <div> like a pop-up box.
I successfully set up the first button to display a <div> named bigbox, but when I try to click on the second button, it doesn't show another <div> called editbox.
However, when I removed the jQuery function controlling the first button, it started working for the second button.
<html>
<head>
<title>Page</title>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<style type="text/css">
.bigbox {
background-color: #F5E49C;
color: #000;
padding: 0 5px;
width:280px;
text-align: center;content: "";display: none;
padding-bottom: 30px;
padding-top: 10px;
}
.editbox {
background-color: #F5E49C;
color: #000;
padding: 0 5px;
width:280px;
height:500px;
text-align: center;content: "";
display: block;
padding-bottom: 70px;
padding-top: 10px;
position: absolute;left:300px;top:1px;
}
</style>
</head>
<body>
<button id="ClickMe">Click Me</button>
<div id="moveableBox" data-display="hidden" class="bigbox">
</div>
<br>
<button id="Click">Second pop box</button>
<div id="ableBox" data-display="hidden" class="editbox">
</div>
<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>
</body>
</html>