Question

我遇到以下问题：

我正在学习本教程：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不再像demo那样有效

如果我在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>

Answer 1

试试这个版本：

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

替换live()上的jQuery documentation：

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

成为

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

jQuery模态关闭不会被触发

1 个答案: