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示例。

这个问题的原因是我需要在第二个模态框隐藏后触发某个操作，然后在第一个模态框隐藏时触发其他操作。你有什么想法可以使用每个模态框的事件来解决这个问题吗？ 注意：第二个模态框必须在另一个模态框内部，因为它们被称为局部视图。

- BoteroM89

Answer 1

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

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

$(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框架不支持重叠模态对话框。在继续将模态对话框嵌套在模态对话框中时，请注意此问题，特别是涉及通过标记API和data-dismiss =“modal”初始化的解除元素。

P.P.S.:

- Aaron

---

非常感谢，它完美地运行了，正是我所需要的。唯一需要做的就是将代码放置在主窗口中，因为当放置在部分视图中时，第二个模态继承了所有过去的事件。 - BoteroM89

Answer 2

第二个模态 HTML 不必包含在第一个模态体中。只需包含 data-target 链接并将第二个模态移动到第一个之外。这样事件将按预期触发。

<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/

- Mihai Alex

---

嗨@mihai-alex，谢谢回复。我考虑过这个问题，但我需要第二个函数在第一个函数内部，因为两者都是从局部视图调用的。抱歉我没有表达清楚。 - BoteroM89