引导模式弹出窗口隐藏在关闭状态 [英] Bootstrap modal popover hide on close

问题描述

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

I have a modal that when trying to run will activate a popover for validation. I've added a timeout to popover to hide after 3 seconds. But if you close the modal the timeout features seems to stop, the popover doesn't hide and even directly telling it to hide doesn't work.

模式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();

I'm hoping for a cleaner way to hide the popover other than $('.popover').remove();

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

推荐答案

使用2.1.0，存在一个错误，当模式关闭时弹出窗口没有隐藏.更新到2.3.1，弹出框现在也正在关闭模式-.-

Using 2.1.0 there is a bug with popover not hiding when modal is closed. Updated to 2.3.1, the popover was now closing the modal as well -.-

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

Added in the following code to stop the event bubbling up and closing the modal as well

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

这篇关于引导模式弹出窗口隐藏在关闭状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！