I've made my own dialog box using jQuery, it's working fine, everything fine, when first time it opens and close successfully, when i again try to open, but appears nothing? can you tell me what's wrong here?
Here is my source code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('a.dialog-window').click(function(){
var signUpBox=$(this).attr('href');
$(signUpBox).fadeIn(500);
$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(500);
return false;
});
$('a.close_dialog_box').click(function(){
$('.dialog_box').fadeOut(400, function(){
remove();
});
return false;
});
});
</script>
<style>
.dialog_box{
width: 70%;
height: 70%;
background-color: #520832;
position: fixed;
left: 15%;
top: 15%;
-webkit-box-shadow: 0px 1px 15px 4px rgba(50, 50, 50, 1);
-moz-box-shadow: 0px 1px 15px 4px rgba(50, 50, 50, 1);
box-shadow: 0px 1px 15px 4px rgba(50, 50, 50, 1);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
display: none;
}
.close_dialog_box{
position: fixed;
right: 14%;
top: 10%;
}
</style>
</head>
<body>
<a href="#dialog" class="dialog-window">Signup!!</a>
<div id="dialog" class="dialog_box">
<a href="#" class="close_dialog_box"><img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>
<h2 style="color: #E2E2E2; font-family: Aileron, sans-serif; text-align: center;">Signup Now!</h2>
<form method="post" class="signUp" action="#">
</form>
</div>
</body>
</html>
