Question

我使用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>

Answer 1

删除函数remove（）;

所以onclick代码将是

$('a.close_dialog_box').click(function(){
                        $('.dialog_box').fadeOut(400, function(){
                            //no need of remove
                        });
                        return false;
                    });

Answer 2

您可以更改

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

到

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

以下是jsfiddle

Answer 3

从

中删除行remove();

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

Answer 4

行remove();正在从html中完全删除对话框，因此无法再次打开它，因为它不再存在。尝试从代码中删除remove();行，它应该可以正常工作。

Answer 5

在try块中使用对话框。然后使用catch块处理执行。 }

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

5 个答案: