单击后模态窗口更改位置答案

【问题标题】：Modal Window Changing Position After Clicked单击后模态窗口更改位置
【发布时间】：2014-07-10 09:32:04
【问题描述】：

我为一个练习网站创建了一个登录/注册模式窗口。但是，我第一次单击登录/注册时，模式窗口在顶部太高了（因此覆盖了登录/注册表单的一半）。当我关闭模态窗口并再次打开它时，窗口位于正确的位置。如何使模态窗口在第一次单击时位于正确的位置？（p.s. 登录和注册按钮都打开到同一个模式窗口）这是我的html编码：

<body>
<div class="header">
    <div class="nav">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="#lr-box" class="login-register">Log In</a></li>
            <li><a href="#lr-box" class="login-register">Register</a></li>
        </ul>
    </div>
</div>

<div id="lr-box" class="lr-popup">
    <div class="login">
            <h2>Log In</h2>
            <img src="images/line.png" width="300px" id="horizonal-border" />
            <form action="" name="login" class="login" method="post">
                <div class="lr-field">
                    <label for="email">Email:</label><br />
                    <input type="email" name="email" class="email" value="" autocomplete=on /><br />
                </div>

                <div class="lr-field">
                    <label for="password">Password:</label><br />
                    <input type="password" name="password" class="password" /><br />
                </div>

                <div id="r-field">
                <input type="checkbox" name="remember" id="remember" />
                <label for="remember"><span></span>Remember Me</label>
                </div>

                <input type="button" id="login-button" name="Log In" />
                <input type="button" class="close" value="Cancel" />
            </form>
         </div>

         <div class="register">
            <h2>Register</h2>
            <img src="images/line.png" width="300px" id="horizonal-border" />
            <form action="" name="register" class="register" method="post">
                <div class="lr-field">
                    <label for="email">Email (preferably school):</label><br />
                    <input type="email" name="email"id="email" value="" autocomplete="on" action="" /><br />
                </div>

                <div class="lr-field">
                    <label for="password">Password:</label><br />
                    <input type="password" name="password" id="password" autocomplete="off" /><br />
                </div>

                <div class="lr-field">
                    <label for="password_again">Enter Your Password Again:</label><br />
                    <input type="password" name="password_again" id="password_again" /><br />
                </div>

// Rest of coding of form

                <input type="button" class="close" id="r-cancel" value="Cancel" />
                <input name="Register" type="submit" id="register-button" value="" />

            </form>
         </div>
    </div>
</div>
</body>

这是我的 JavaScript 代码：

 $(document).ready(function() {
    $('a.login-register').click(function() {

        var lrBox = $(this).attr('href');

        $(lrBox).fadeIn(300);

        var popMargTop = ($(lrBox).height() + 24) / 2; 
        var popMargLeft = ($(lrBox).width() + 24) / 2; 

        $(lrBox).css({ 
            'margin-top' : -popMargTop,
            'margin-left' : -popMargLeft
        });

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

        return false;
    });

$('.close, #mask').live('click', function() { 
    $('#mask , .lr-popup').fadeOut(300 , function() {
        $('#mask').remove();  
    }); 
    return false;
});

这是我的 layout.css：（p.s. 这只是模态弹出的相关 css）

.overlay {
    z-index: 5;
    background: rgba(0, 0, 0, .50);
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
}

#mask {
    display: none;
    background: #173B3F;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    z-index: 999;
}

#lr-box {
    display: none;
    background: #E4EDED url(images/vertical-line.png) no-repeat center;
    padding: 10px 20px 20px 30px;
    border: 5px solid #113335;
    font-size: 18px;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 99999;
    border-radius: 3px 3px 3px 3px;
}

【问题讨论】：

标签： javascript jquery modal-dialog

【解决方案1】：

每个浏览器的javascript可能不同，尝试在不同的浏览器上打开网站，看看是否还在动。如果是这样，那么您的编码有问题。

【讨论】：

是的，当我在不同的浏览器或不同的计算机上尝试时，模态窗口不会移动。有什么原因吗？