Bootstrap 3:防止模态内部模态每次触发(hidden.bs.modal) [英] Bootstrap 3: prevent modal inside modal to trigger (hidden.bs.modal) every time

问题描述

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

I have one modal inside another modal and I've managed to make the inner one close without affecting the other. The problem is that when the second modal is closed it triggers the 'hidden.bs.modal' event for its self and for the first 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示例.

这个问题的原因是，仅当第二个模式被隐藏时，我才需要触发一个动作，而当第一个模式被隐藏时，则需要执行其他操作. 关于如何使用每个事件解决此问题的任何想法?

The reason for this question is that I need to trigger an action only when the second modal gets hidden and then something else when the first one gets hidden. Any ideas on how to fix this using the event for each of them???

注意: 第二个模态必须在另一个模态之内，因为它们被称为局部视图.

推荐答案

我猜想这些模式元素是异步引入页面的，这就是为什么您使用绑定到文档而不是绑定的委托事件侦听器的原因将hidden.bs.modal直接绑定到#myModal和#uploadImage本身.如果不是这种情况，那么您可以直接使用绑定，那么建议您使用这种方法来捕获#uploadImage本身上的hidden事件，并防止它使用.

I'm guessing that these modal elements are being introduced to the page asynchronously, and that's why you're using a delegated event listener bound to the document rather than binding hidden.bs.modal directly to #myModal and #uploadImage themselves. If this is not the case, and you can get away with binding directly, I'd suggest using this approach to catch the hidden event on #uploadImage itself, and prevent it from bubbling up the DOM tree using something like event.stopPropagation();.

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

Alternatively, though, you can continue to delegate this handler to the document, and use the target property of the Event object passed into your handler callback to determine which element was the actual source of the 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.
    }
});

PS:您可能已经知道，Bootstrap框架不支持重叠模式对话框.请注意这一点，因为您继续将模态嵌套在模态中，特别是关于通过标记API和data-dismiss="modal"初始化的解雇元素.

P.S.: As you may already know, the Bootstrap framework does not support overlapping modal dialogs. Be aware of this as you continue to nest modals within modals, especially concerning dismissal elements initialized via the markup API and data-dismiss="modal".

P.P.S .:

这篇关于Bootstrap 3:防止模态内部模态每次触发(hidden.bs.modal)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！