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 に答える