Question

我正在通过自己的编码创建一个对话框，因为我运行此代码没有任何反应，我的signup!!链接都没有工作，我的方法就像我点击signup!!链接一样，应该出现一个模态框，但没有任何事情发生这样的，我的Jquery库是正确的路径所以它不得不处理这个...

这是我的照片，当我运行我的代码时，它直接显示模态框而不点击signup!!链接：click here

为什么我的对话框不起作用？

这是我的源代码：

<!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(400);

                     $('body').append('<div id="mask"></div>');
                     $('#mask').fadeIn(300);    
                        return false;
                    });

                    $('a.close, #mask').live('click', function(){
                        $('#mask, .dialog_box').fadeOut(400, function(){
                            $('#mask').remove();
                        });
                        return false;
                    });
                });
        </script>
        <style>
            .dialog_box{
                width: 70%;
                height: 70%;
                background-color: #520832;
                position: fixed;
                left: 15%;
                top: 15%;            
                -moz-box-shadow: -1px 0px 38px #520832;
                -webkit-box-shadow: -1px 0px 38px #520832;
                box-shadow: -1px 0px 38px #520832;
            }

            .close{
                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"><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

在点击链接之前，您没有告诉浏览器您的对话框不可见。将display: none;添加到对话框的CSS规则中。像这样：

.dialog_box
{
    width: 70%;
    height: 70%;
    background-color: #520832;
    position: fixed;
    left: 15%;
    top: 15%;            
    -moz-box-shadow: -1px 0px 38px #520832;
    -webkit-box-shadow: -1px 0px 38px #520832;
    box-shadow: -1px 0px 38px #520832;
    display: none;
}

为什么我的对话框没有用完？

1 个答案: