Question

我有这个jsFiddle：http://jsfiddle.net/jsFiddlePlayer/vhg7csb7/3/

当您加载页面并单击“博客”选项卡时，它应显示弹出窗口5.6秒然后消失。如果用户单击另一个选项卡并返回“博客”，则不应再次显示弹出窗口。每个用户访问该页面应该只有一次。

目前，每当您访问“博客”标签时，它都会显示弹出窗口。我查看了this post（Configuring a bootstrap popover to appear only once?），但destroy方法对我来说似乎不起作用。

这是HTML：

<div class="r1 row" id="anch-story">
    <div class="c1 col-md-12">
        <ul class="nav nav-justified nav-tabs">
            <li class="active">
                <a class="btn-lg" data-toggle="tab" href="#story-tab-1">Vision</a>
            </li>
            <li>
                <a class="btn-lg" data-toggle="tab" href="#story-tab-2">Manufacturing</a>
            </li>
            <li>
                <a class="btn-lg" data-toggle="tab" href="#story-tab-3">Press</a>
            </li>
            <li>
                <a class="btn-lg" data-toggle="tab" href="#story-tab-4">Blog</a>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane fade in active" id="story-tab-1">
            </div>
            <div class="tab-pane fade" id="story-tab-2">
            </div>
            <div class="tab-pane fade" id="story-tab-3">
            </div>
            <div class="tab-pane fade" id="story-tab-4">
                <div id="page-selection" class="text-center">
                    <ul class="pagination bootpag pagination-lg">
                        <li data-lp="1" class="prev disabled"> <a href="javascript:void(0);">
                                &#xf0d9;
                            </a>
                        </li>
                        <li data-lp="1" class="active"> <a href="javascript:void(0);">1</a>

                        </li>
                        <li data-lp="2"> <a href="javascript:void(0);">2</a>

                        </li>
                        <li data-lp="2" class="next"> <a href="javascript:void(0);">
                                &#xf0da;
                            </a>
                        </li>
                    </ul>
                </div>          
            </div>
        </div>
    </div>
</div>

这是jQuery：

$(document).ready(function(){
    $('#page-selection > ul').attr('title', 'Blog Post Navigation')
        .attr('data-content', 'Use these controls to easily and quickly navigate the blog posts.')
        .attr('data-placement', 'bottom')
        .attr('data-toggle','popover');  

    $('a[href="#story-tab-4"]').on('shown.bs.tab', function (e) {
        $('#page-selection > ul').popover('show');  

        window.setTimeout(function () {
            $('#page-selection > ul').popover('destroy');
            }, 5600);
    });

    $('body').on('click', function (e) {
        $('[data-toggle=popover]').each(function () {
            // hide any open popovers when the anywhere else in the body is clicked
            if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
                $(this).popover('destroy');
            }
        });
    });
});

这是CSS：

.next > a {
    font-family:'Fontawesome';
    content:"\f0d9";
}
.prev > a {
    font-family:'Fontawesome';
    content:"\f0da";
}
.prev > a, .next > a {
    font-size: 2.3em !important;
    max-height: 47px !important;
    padding-top: 2px !important;

}

Answer 1

也许您可以添加一些简单的逻辑来检查弹出窗口是否已显示。

这样的事情：

$('a[href="#story-tab-4"]').on('shown.bs.tab', function (e) {

    if($(this).data('popover-shown')) return;

    $(this).data('popover-shown', true);

    $('#page-selection > ul').popover('show'); 

    ...

演示：http://jsfiddle.net/alan0xd7/vhg7csb7/5/

Answer 2

这是实现所需功能的简单方法。添加一个变量以检查它是否已经显示：

var shownYet=false;

if (!shownYet){
    shownYet=true;         
    $('#page-selection > ul').popover('show');  
    window.setTimeout(function () {
        $('#page-selection > ul').popover('destroy');
    }, 5600);       
}

fiddle

仅显示一次Bootstrap popover

2 个答案: