My dialog box is opening for first time but not second time?
Question
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>
5 answers
solution1
3 2014-06-02 11:42:40
Remove the function remove();
so the onclick code will be
$('a.close_dialog_box').click(function(){
$('.dialog_box').fadeOut(400, function(){
//no need of remove
});
return false;
});
solution2
2 2014-06-02 11:42:41
You can change
$('.dialog_box').fadeOut(400, function(){
remove();
});
to
$('.dialog_box').fadeOut(400);
Here is a jsfiddle as well
solution3
0 ACCPTED 2014-06-02 11:42:02
Remove the line remove(); from,
$('a.close_dialog_box').click(function(){
$('.dialog_box').fadeOut(400, function(){
remove(); <------ Remove this
});
return false;
});
solution4
0 2014-06-02 11:43:42
The line remove(); is completely removing the dialog box from the html and thus cannot be opened again as it no longer exists. Try removing the remove(); line from your code and it should work fine.
solution5
-2 2019-06-02 10:13:42
use dialog box in try block. then use catch block to handle the execption. }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.