0

我有以下问题：

我正在关注本教程：http ://www.alessioatzeni.com/blog/login-box-modal-dialog-window-with-css-and-jquery/

有一小段jquery：

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

它负责单击#mask（覆盖）或关闭按钮a.close

Live 现在已被弃用，所以我尝试简单地将其替换为 on：

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

a.close工作完美，但不再#mask像演示那样工作

如果我在 jQuery 模式之外单击，它不会再触发该功能。

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

1 回答 1

3

试试这个版本：

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

从关于替换的jQuery 文档live()中：

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

变成

$(document).on(events, selector, data, handler);
于 2013-06-25T20:45:40.167 回答