Question

如何在5秒后消除此弹出窗口？另外，如果我点击它，我怎么能让它隐藏？

from subprocess import check_output,CalledProcessError
try:
   data = check_output(args, env=environ)
except CalledProcessError as e:
    print(e.output)
else:
    print(data)

Answer 1

嗯，@ Coding Enthusiast所提到的，肯定会为你完成这项工作。同样，我只是made the fiddle。你可以看一下。

我所做的就是按钮，但你可以替换它

<强> HTML

<div class="bs-example">
    <button type="button" class="btn btn-primary" data-toggle="popover" title="Popover title" data-content="Default popover">Popover</button>
</div>

<强> jquery的

$(document).ready(function () {

    $('[data-toggle="popover"]').popover({
        placement: 'bottom',
        delay: {
            "show": 500,
            "hide": 100
        }
    });

    $('[data-toggle="popover"]').click(function () {

        setTimeout(function () {
            $('.popover').fadeOut('slow');
        }, 5000);

    });

});

不要忘记show和hide（issue here）

上的双引号

Answer 2

jsfiddle

收听ul.menu.fright上的悬停事件。显示您的popover，然后setTimeout以在一段时间后隐藏它。

//this is with the hover
$('ul.menu.fright').hover(function(){
        $('ul.menu.fright').popover('show');
        tmp = setTimeout(function(){$('.popover').popover('hide')}, 5000);
});

我意识到我的原始答案没有彻底回答你的问题所以我稍微调了一下。现在它会在加载时自动显示，并在5秒后隐藏。点击显示。

jsfiddle 2

$('ul.menu.fright').popover({
    placement: 'bottom',
    delay: {
        show: 500,
        hide: 100
    },
    content:'Look at me!'
}).popover('show');
$('ul.menu.fright').on('shown.bs.popover', function () {

    setTimeout(function() {
        $('.popover').fadeOut('slow',function() {}); 
    },5000);

});
$('#cokepop').click(function () {
    $('#cokepop').popover('show');

});

我的JsFiddle 2可以创造奇迹但你可以通过隐藏popover来改善用户体验，如果它在点击时显示并显示它是隐藏的。

JsFiddle 3

您所要做的就是更改onclick事件：

$('#cokepop').click(function () {

    if ($("#cokepop").next('div.popover:visible').length){
        $('#cokepop').popover('hide');
    }else{
        $('#cokepop').popover('show');
    }
});

Answer 3

我认为.popover是一个与你用来弹出窗口工作的东西相关联的函数，但也许这段代码可以帮助你呢？

$('ul.menu.fright').delay(5000).hide();

$('ul.menu.fright').on('click', function() {
    $(this).hide();
});

将div设置为在加载时显示，然后JS将延迟删除5000毫秒然后隐藏它。第二个函数是一个用于点击的函数，它将隐藏

Answer 4

这似乎解决了HPWD提出的每个要素的褪色。

$(document).ready(function () {

    $('[data-toggle="popover"]').popover({
        placement: 'bottom',
        delay : {
            hide : 5000 // doesn't do anything
        }
    }).on('shown.bs.popover', function () {
        setTimeout(function (a) {
            a.popover('hide');
        }, 3000, $(this));
    });
});

Answer 5

一种解决方案，当有两个或多个显示弹出框的元素时起作用

向每个元素添加data属性，以跟踪 html 上的弹出窗口可见性：

data-popoverisvisible="0"

JS ：根据用户点击手动触发弹出式窗口的隐藏显示：文档准备就绪时...

$('.element-with-popover').on( 'click', function( evt ) {

    var elem,
        delay;

    delay = 5000; // 5 seconds

    evt.preventDefault();
    evt.stopImmediatePropagation();

    elem = evt.currentTarget;

    if( $( elem ).data( 'popoverisvisible' ) == 1 )
    {
        $( elem ).popover( 'hide' );
        $( elem ).data( 'popoverisvisible', 0 );
    } 
    else
    {
        $( elem ).popover( 'show' );
        $( elem ).data( 'popoverisvisible', 1 );
        setTimeout( function()  {
            if( $( elem ).data( 'popoverisvisible' ) == 1 )
            {
                $( elem ).popover( 'hide' );
                $( elem ).data( 'popoverisvisible', 0 );
            } 
        }, delay );
    }
} );

弹出窗口将在用户单击时显示，并在以后的单击中隐藏（如果仍然可见）。

显示的弹出窗口将在显示后5秒自动隐藏。

如何在5秒后淡出一个bootstrap popover？

5 个答案:

jsfiddle

jsfiddle 2

JsFiddle 3

一种解决方案，当有两个或多个显示弹出框的元素时起作用