1

私は独自の背景で Twitters ブートストラップ モーダルを使用しています。これは、モーダルが Pinterest モーダルのように動作するようにするためです (body-noscroll とスクロールバーはモーダルの高さと一致します)。

モーダルを閉じるための私のコードは次のとおりです。

$(".modal-container").click(function(e) {
    $('.modal-container .modal').modal('hide');
});
$('.modal').live('hidden', function () {
    $('body').removeClass('noscroll');
    $('.modal-container').hide();
});

ただし、ユーザーが内部をクリックする.modalと、この関数は引き続き実行されますが、これは望ましくありません。誰でも助けることができますか？

ありがとう。

したがって、htmlは次のとおりです。

<div class="modal-container">
    <div class="modal">
        Content
    </div>
</div>

CSS は次のとおりです。

.modal-container {
    overflow-y: scroll;
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
}
.modal {
    position: absolute;
    margin-bottom: 150px;
    width: 630px;
    margin-left: -315px;
    border: 1px solid #e7e7e7;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    z-index: 1052;
    cursor: default;
}
4

1 に答える 1

2

e.stopPropagationOPが要求するイベント委任では機能しないため、回答を編集しました

@Adeneo がコメントしたように、通常、より簡単な解決策は、イベント ターゲット、つまり、クリック イベントを発生させた要素が、クリック ハンドラーをアタッチした要素に対応するかどうかを確認することです。

$(".modal-container").click(function(e) {
    if (e.target === this) $('.modal-container .modal').modal('hide');
});
于 2013-01-13T17:59:11.037 に答える