CODEWITHSUNDEEP
jquery
JochemQuery
JochemQuery

Reputation: 1547

jQuery modal close doesn't get trigged

I've the following problem:

I was following this tutorial : http://www.alessioatzeni.com/blog/login-box-modal-dialog-window-with-css-and-jquery/

There is a little piece of jquery:

 $('a.close,#mask').on('click', function () {
            $('#mask,.loginPopup').fadeOut(300, function () {
                $('#mask').remove();
            });
            return false;
        });

It takes care of clicking on the #mask (the overlay) or at the close button a.close

Live is deprecated now so i tried to simply replace it with on:

$('a.close, #mask').on('click', function () {
    $('#mask , .loginPopup').fadeOut(300, function () {
        $('#mask').remove();
    });
    return false;
});

The a.close works perfectly but #mask doesn't work anymore like the demo does

It doesn't trigger the function anymore if i click outside the jQuery modal.

CSS:

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

HTML

 <div id="loginBox" class="loginPopup">
        <a href="#" class="close">
            <img src="@Url.Content("../Content/images/close_pop.png")" class="btn_close" title="Close Window" alt="Close" /></a>


        <form method="post" class="signin" action="#">
            <fieldset class="textbox">
                <legend>Login box</legend>

                <label class="username">
                    <span>Username or email</span>
                    <input id="username" name="username" value="" type="text" autocomplete="on" placeholder="Email">
                </label>

                <label class="password">
                    <span>Password</span>
                    <input id="password" name="password" value="" type="password" placeholder="Password">
                </label>

                <button class="submit button" type="button">Sign in</button>
            </fieldset>
        </form>



    </div>

Upvotes: 0

Views: 396

Answers (1)

GriffeyDog
GriffeyDog

Reputation: 8376

Try this version:

$(document).on('click', 'a.close, #mask', function () {
    $('#mask , .loginPopup').fadeOut(300, function () {
        $('#mask').remove();
    });
    return false;
});

From the jQuery documentation on replacing live():

$(selector).live(events, data, handler);

becomes 

$(document).on(events, selector, data, handler);

Upvotes: 3

Related Questions