Bootstrap modal popover 关闭时隐藏答案

【问题标题】：Bootstrap modal popover hide on closeBootstrap modal popover 关闭时隐藏
【发布时间】：2013-05-01 00:12:32
【问题描述】：

我有一个模式，在尝试运行时会激活一个弹出框进行验证。我已经在弹出窗口中添加了一个超时以在 3 秒后隐藏。但是，如果您关闭模式，超时功能似乎会停止，弹出框不会隐藏，甚至直接告诉它隐藏也不起作用。

模态html

<div class="modal hide fade" id ="password_modal">
    <div class="modal-header">
        <h3>Change Password <span class="extra-title muted"></span></h3>
    </div>
    <div class="modal-body form-horizontal">
        <div class="control-group">
            <label for="current_password" class="control-label">Current Password</label>
            <div class="controls">
                <input type="password" name="current_password">
            </div>
        </div>
        <div class="control-group">
            <label for="new_password" class="control-label">New Password</label>
            <div class="controls">
                <input type="password" name="new_password">
            </div>
        </div>
        <div class="control-group">
            <label for="confirm_password" class="control-label">Confirm Password</label>
            <div class="controls">
                <input type="password" name="confirm_password">
            </div>
        </div>      
    </div>
    <div class="modal-footer">
        <button href="#" class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button href="#" class="btn btn-primary" id="password_modal_save">Save changes</button>
    </div>
</div>

模态框内

options = {
    content: raw_data.errors,
    html: true,
    placement: 'top',
    trigger: 'manual'
}
$('#password_modal_save').popover(options);
$('#password_modal_save').popover('show');
setTimeout(function(){ click.popover('hide'); }, 3000);

模态关闭监听器

$("body").on("hidden", "#password_modal", function(event){
    $(this).remove(); //Remove the modal to stop duplications
    $('#password_modal_save').popover('hide'); //Targetting the popover directly
    $('.popover').remove(); //Last solution to actually hiding it
});

除了$('.popover').remove();之外，我希望有一种更简洁的方法来隐藏弹出框

小提琴：http://jsfiddle.net/La2yn/20/

【问题讨论】：

你能发布你的html吗..
已添加模态的html
你能做一个小提琴jsfiddle.net/La2yn。可能会更新您的标记打开模式。
在发现问题的过程中添加了一个小提琴。我正在使用 bootstrap 2.1.0，正如您在我发布的小提琴中看到的那样，它一定有问题。当您制作小提琴时，它使用的是 2.3.1 并且工作正常。如果您将其发布为答案，我会接受它，因为您帮助找到了它:)
还有一点需要注意，出于某种原因在bootstrap.2.3.1 做.popover('hide') 似乎也隐藏了模态。在弹出窗口超时时发生

标签： twitter-bootstrap modal-dialog popover

【解决方案1】：

使用 2.1.0 存在一个错误，当模式关闭时弹出框不隐藏。更新到 2.3.1，弹出框现在也关闭了模式 -.-

添加了以下代码以阻止事件冒泡并关闭模式

$("body").on("hidden", "#password_modal_save", function(e){
    e.stopPropagation(); //Once popover is hidden stop the event from going to parent
});

【讨论】：