twitter-bootstrap 如何在 5 秒后淡出引导程序弹出窗口？

How to fade out a bootstrap popover after 5 seconds?

提问by EnexoOnoma

How can I fade out this popover after 5 seconds? Also, if I click on it, how can I make it hide?

如何在 5 秒后淡出这个弹出框？另外，如果我点击它，我怎样才能让它隐藏？

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

回答by Saiyan Prince

Well, what @Coding Enthusiast has mentioned, will surely do the job for you. And for the same, I just made the fiddle. You can check it out.

好吧，@Coding Enthusiast 所提到的，肯定会为您完成这项工作。同样，我刚刚制作了 fiddle。你可以检查一下。

What I have done is on the button, but you can replace it

我所做的是在按钮上，但你可以更换它

html

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);

    });

});

dont forget the double quote on show and hide ( issue here)

不要忘记显示和隐藏的双引号（问题在这里）

回答by Coding Enthusiast

jsfiddle

提琴手

Listen to the hover event on your ul.menu.fright. Show your popover, then setTimeoutto hide it after an amount of time.

收听 .hover 上的悬停事件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);
});

---

---

I realised my original answer didn't answer your question thoroughly so I tweaked it a little bit. Now it shows automatically on load and it hides after 5 seconds. Shows on click.

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

jsfiddle 2

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');

});

My JsFiddle two will work wonders but you can improve user experience by hiding the popover if it is shown on click and showing it if it is hidden.

我的 JsFiddle 2 会产生奇迹，但您可以通过隐藏弹出窗口（如果它在单击时显示）并在它隐藏时显示它来改善用户体验。

JsFiddle 3

JsFiddle 3

All you have to do is change the onclickevent:

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

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

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

回答by Philip Broadhead

I presume that the .popover is a function associated to something you are using to make the popup work but perhaps this code may help you out?

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

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

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

set the div to display on load and then the JS will delay the removal for 5000 milliseconds and then hide it. the second function is one for the click and it will hide

将 div 设置为在加载时显示，然后 JS 会将删除延迟 5000 毫秒，然后将其隐藏。第二个功能是点击功能之一，它将隐藏

回答by Yonatan Attali

This seems to solve the fading of every element that HPWD brought up.

这似乎解决了 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));
    });
});

回答by Paolo

A solution that works when there are two ore more elements that display popovers

当有两个或更多元素显示弹出框时有效的解决方案

Add a dataattribute to every element to track the popover visibility on the html:

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

data-popoverisvisible="0"

JS: Trigger manually popover show-hide based on user click: at document ready...

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 );
    }
} );

The popover(s) will show upon user click and hide (if still visible) on a subsequent click.

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

Visible popover(s) will automatically hide 5 seconds after they have shown up.

可见的弹窗会在出现 5 秒后自动隐藏。