Bootstrap 3：每次阻止模态内部模态触发（hidden.bs.modal）

Question

我在另一个模态中有一个模态，我设法使内部模态关闭而不影响另一个模态。问题是，当第二个模态关闭时，它会为自己和第一个模态触发'hidden.bs.modal'事件。

<!-- My Html -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Open demo modal</button>
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                 <h4 class="modal-title" id="myModalLabel">Demo Modal</h4>
            </div>
            <div class="modal-body">
                <p>
                    <a href="#" data-toggle="modal" data-target="#uploadImage" class="btn btn-primary">Upload image</a>
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
    <div class="modal" id="uploadImage" tabindex="-1" role="dialog" aria-labelledby="uploadImage-title" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                     <h4 class="modal-title" id="uploadImage-title">Upload new image</h4>
                </div>
                <div class="modal-body">
                    Testing Area
                </div>
                <div class="modal-footer">                
                    <button type="button" class="btn btn-default" id="btnUploadCancel">Cancel</button>
                    <button type="button" class="btn btn-success">Accept</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- My JS-->
$('#btnUploadCancel').click(function () {
    $('#uploadImage').modal('toggle');
});

$(document).on('hidden.bs.modal', '#myModal', function () {
    alert("hello");
});

$(document).on('hidden.bs.modal', '#uploadImage', function () {
    alert("goodbye");
});

这是我制作的jsFiddle example。

这个问题的原因是我只需要在第二个模态被隐藏时触发一个动作，然后在第一个模态被隐藏时触发其他东西。 关于如何使用每个事件修复此问题的任何想法???

注意： 第二个模式必须位于另一个模式中，因为它们被称为部分视图。

Answer 1

我猜测这些模态元素是异步引入页面的，这就是为什么你使用绑定到文档的委托事件监听器而不是绑定hidden.bs.modal的原因。直接发送到#myModal和#uploadImage。如果情况并非如此，并且您可以直接使用绑定，我建议使用此方法来捕获hidden本身上的#uploadImage事件，并防止它冒出DOM树使用event.stopPropagation();之类的东西。

或者，您可以继续将此处理程序委托给文档，并使用传递给处理程序回调的target对象的Event属性来确定哪个元素是实际的源代码。事件：

$(document).on('hidden.bs.modal', '#myModal', function (event) {
    if (event.target.id == 'uploadImage') {
        // do stuff when the upload dialog is hidden.
    }
    else if (event.target.id == 'myModal') {
        // do stuff when the outer dialog is hidden.
    }
});

P.S。：您可能已经知道，Bootstrap框架does not support overlapping modal dialogs。在模态中继续嵌套模态时要注意这一点，特别是关于通过标记API和data-dismiss="modal"初始化的解雇元素。

P.P.S。：

Answer 2

第二个模态html不必包含在第一个模态体中。仅包括数据目标链接并将第二个模态移到第一个模式之外。这样事件就会像你期望的那样激发。

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Open demo modal</button>
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                 <h4 class="modal-title" id="myModalLabel">Demo Modal</h4>
            </div>
            <div class="modal-body">
                <p>
                    <a href="#" data-toggle="modal" data-target="#uploadImage" class="btn btn-primary">Upload image</a>
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>

</div>
<div class="modal" id="uploadImage" tabindex="-1" role="dialog" aria-labelledby="uploadImage-title" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                     <h4 class="modal-title" id="uploadImage-title">Upload new image</h4>
                </div>
                <div class="modal-body">
                    Testing Area
                </div>
                <div class="modal-footer">                
                    <button type="button" class="btn btn-default" id="btnUploadCancel">Cancel</button>
                    <button type="button" class="btn btn-success">Accept</button>
                </div>
            </div>
        </div>
    </div>

http://jsfiddle.net/wytf57mL/3/