CODEWITHSUNDEEP
javascriptjquerymodal-dialog
sleepypanda
sleepypanda

Reputation: 89

Modal Window Changing Position After Clicked

I have created a login/register modal window for a practice website. However, the first time I click on Login/Register, the modal window is too far up on the top (and so half of the login/register form is covered). When I close the modal window and open it again the second time, the window is at the correct position. How do I make the modal window be at the correct position at the first click? (p.s. both log in and register button opens to the same modal window) Here is my html coding:

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

Here is my JavaScript coding: 

 $(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;
});

Here is my layout.css: (p.s. this is only the relevant css for modal popup)

.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;
}

Upvotes: 1

Views: 384

Answers (1)

user3603705
user3603705

Reputation: 108

The javascript may be different on each browser, try opening the website on different browsers, and see whether it is still moves. if it does, then there is something wrong with your coding.

Upvotes: 1

Related Questions