Question

我为练习网站创建了一个登录/注册模式窗口。但是，当我第一次点击登录/注册时，模态窗口位于顶部太远（因此覆盖了一半的登录/注册表单）。当我关闭模态窗口并第二次再次打开时，窗口位于正确的位置。如何在第一次点击时将模态窗口置于正确的位置？（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;
}

Answer 1

每个浏览器上的javascript可能不同，请尝试在不同的浏览器上打开网站，看看它是否仍在移动。如果确实如此，那么你的编码就会出现问题。

单击后模态窗口更改位置

1 个答案: