Question

编写Bootstrap模式JS的方式，在＆＃34; .modal＆＃34;中的任何地方都有点击事件。元素将消除模态。关于＆＃34; .modal＆＃34;的任何和所有孩子。 class，禁用了dismiss行为，允许用户与模态的内容进行交互。

我的问题 - 如何轻微修改此行为，以便点击＆＃34; .modal＆＃34;会解雇它，但点击孩子的孩子不会吗？

<div id="myModal" class="modal fade">
    <div class="foo"><!--dismiss modal on click-->
        <div class="bar"><!--don't dismiss modal on click-->
            <img src="http://placehold.it/1000x800"/>
        </div>
    </div>
</div>

在这种情况下，所需的行为是点击＆＃34; .foo＆＃34;应该在点击＆＃34; .bar＆＃34;时忽略模态。不会解雇模式，并继续其惯常的业务。

这样做的原因是我正在进行一些高级定位，并且在实际模态内容周围需要两个包装元素，这些元素在点击时仍会消除模态。

请参阅JSFiddle - http://jsfiddle.net/8w7fxtyr/

Answer 1

这对委托处理程序应该可以解决问题，你只需要设置一次，而不是每个模态：Updated Fiddle

$(document).on("click", ".modal .bar", false);
$(document).on("click", ".modal .foo", function(e) {
    $(this).closest(".modal").modal("hide");
});

请注意，订单非常重要，我们需要在点击.bar之前忽略.foo点击次数。

或者，如果避免使用.foo和.bar类非常重要，您可以使用子选择器执行此操作：Fiddle

$(document).on("click", ".modal > * > *", false);
$(document).on("click", ".modal > *", function(e) {
    $(this).closest(".modal").modal("hide");
});

Answer 2

将标准data-dismiss属性添加到foo元素：

<div class="foo" data-dismiss="modal">

但阻止点击传播超过bar：

$(".modal .bar").on("click", function () { return false; });

Answer 3

这是有效的，您不需要指定.modal以外的任何类，因此它仍然是可扩展的。

$(".modal > *").click(function(e) {
    $(this).parent().modal('hide');
}).children().click(function(e) {
    return false;
});

修改Bootstrap模式的默认“关闭”行为

3 个答案: