bootstrap4 弹出框(popovers)方法——迹忆客-ag捕鱼王app官网

本章节我们介绍这些是标准bootstrap程序的弹出框方法。

传递选项

我们还可以使用 options 对象将选项传递给 popovers 方法。

以下示例如果所选元素中的 title 属性值被省略或缺失，将动态设置工具提示的标题文本：

document.addeventlistener("domcontentloaded", function(){
    var element = document.getelementbyid("mypopover");
    var tooltip = new bootstrap.popover(element, {
        title : "default popover title"
    });
});

以下示例将展示如何将 html 内容放置在弹出框中：

document.addeventlistener("domcontentloaded", function(){
    var element = document.getelementbyid("mypopover");
    var popover = new bootstrap.popover(element, {
        title: '
 popover info
',
        content: '
this is a simple example demonstrating how to insert html code inside bootstrap popover.
',
        html: true
    });
});

以下示例将展示如何使用弹出框的延迟选项通过 javascript 动态控制显示和隐藏弹出框的时间。

$(document).ready(function(){
    // showing and hiding popover with same speed
    $(".popover-tiny").popover({
        delay: 500 // show tooltip after 500 milliseconds
    });
    
    // showing and hiding popover with different speed
    $(".popover-large").popover({
        delay: {show: 0, hide: 2000}
    }); 
});

以下示例将展示如何为 bootstrap 弹出框创建自己的自定义模板，而不是通过 javascript 动态使用默认模板。

$(document).ready(function(){
    $('[data-toggle="popover"]').popover({
        html: true,
        template: '
'
    });
    
    // custom jquery to hide popover on click of the close button
    $(document).on("click", ".popover-footer .btn" , function(){
        $(this).parents(".popover").popover('hide');
    });
});

下面的示例将在 #wrapper 元素的末尾插入弹出框的动态生成的 html 代码，而不是默认的 元素。

$(document).ready(function(){
    // append popover html to wrapper element
    $("#mypopovers a").popover({container: '.wrapper'}); 
});

注意 ：覆盖工具提示的默认容器选项值不会在页面上产生任何可见的差异。 要查看实际结果，我们需要检查 dom。 按 ctrl shift i (windows / linux) 或 cmd opt i (mac) 打开开发者工具或 dom inspector。

同样，我们可以为弹出框设置其他选项。 我们来看看 bootstrap 弹出框插件的其他方法。

show

show 方法显示元素的弹出框。 这被视为弹出框的“手动”触发。

$(document).ready(function(){
    $(".show-popover").click(function(){
        $("#mypopover").popover('show');
    }); 
});

hide

hide 方法隐藏元素的弹出框。

$(document).ready(function(){
    $(".hide-popover").click(function(){
        $("#mypopover").popover('hide');
    }); 
});

toggle

toggle 方法切换元素的弹出框。

$(document).ready(function(){
    $(".toggle-popover").click(function(){
        $("#mypopover").popover('toggle');
    }); 
});

dispose

dispose 方法隐藏和销毁元素的弹出框（即删除存储在 dom 元素上的数据）。

$(document).ready(function(){
    $(".destroy-popover").click(function(){
        $("#mypopover").popover('dispose');
    }); 
});

enable

enable 方法使元素的弹出框能够显示。 默认情况下启用弹出框。

$(document).ready(function(){
    $(".enable-popover").click(function(){
        $("#mypopover").popover('enable');
    }); 
});

disable

disable 方法删除了显示元素弹出框的功能。 弹出框只有在重新启用后才能显示。

$(document).ready(function(){
    $(".disable-popover").click(function(){
        $("#mypopover").popover('disable');
    }); 
});

toggleenabled

toggleenabled 方法切换元素的弹出框显示或隐藏的能力。

$(document).ready(function(){
    $(".toggle-enabled-popover").click(function(){
        $("#mypopover").popover('toggleenabled');
    }); 
});

update

update 方法更新元素弹出框的位置。

$(document).ready(function(){
    $(".update-popover").click(function(){
        $("#mypopover").popover('update');
    }); 
});