我的对话框是第一次打开而不是第二次打开

My dialog box is opening for first time but not second time?

本文关键字:第二次 对话框 我的 第一次      更新时间:2023-09-26

我已经使用jQuery制作了自己的对话框,它工作得很好,一切都很好,当它第一次打开和关闭成功时,当我再次尝试打开时,但没有出现任何东西?你能告诉我这是怎么回事吗?

我的源代码:

<!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>

删除函数Remove ();

所以onclick代码将是
$('a.close_dialog_box').click(function(){
                        $('.dialog_box').fadeOut(400, function(){
                            //no need of remove
                        });
                        return false;
                    });

您可以更改

$('.dialog_box').fadeOut(400, function(){
    remove();
});

$('.dialog_box').fadeOut(400);

这里也是一个jsfield

删除remove();行,

$('a.close_dialog_box').click(function(){
    $('.dialog_box').fadeOut(400, function(){
        remove(); <------ Remove this
    });
    return false;
});

remove();行完全从html中删除对话框,因此无法再次打开,因为它不再存在。试着从你的代码中删除remove();行,它应该工作良好。

在尝试块中使用对话框。然后使用catch块处理异常。}