教程 > Bootstrap 5 教程 > Bootstrap 5 高级阅读：772

Bootstrap5 弹出框(Popovers)方法

本章节我们介绍这些是标准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: '<h4 class="custom-title"><i class="bi-info-circle-fill"></i> Popover info</h4>',
        content: '<p>This is a <em>simple example</em> demonstrating how to insert HTML code inside <strong>Bootstrap popover</strong>.</p>',
        html: true
    });
});

尝试一下

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

document.addEventListener("DOMContentLoaded", function(){
    var tinyTrigger = document.getElementById("tinyPopover");
    var largeTrigger = document.getElementById("largePopover");
        
    // Showing and hiding popover with same speed
    var tinyPopover = new bootstrap.Popover(tinyTrigger, {
        delay: 100
    });
    
    // Showing and hiding popover with different speed
    var largePopover = new bootstrap.Popover(largeTrigger, {
        delay: {show: 0, hide: 2000}
    });
});

尝试一下

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

document.addEventListener("DOMContentLoaded", function(){
    var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
    var popoverList = popoverTriggerList.map(function(element){
        return new bootstrap.Popover(element, {
            template: '<div class="popover"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div><div class="popover-footer"><a class="btn btn-secondary btn-sm close">Close</a></div></div>'
        });
    });
});
    
// Close popover on button click
document.addEventListener("click", function(e){
    if(e.target && e.target.classList.contains("close")){
        var popover = bootstrap.Popover.getInstance(e.target.closest(".popover"));
        popover.hide();
    }
});

尝试一下

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

document.addEventListener("DOMContentLoaded", function(){
    var element = document.getElementById("myPopover");

    // Append popover HTML to wrapper element
    var popover = new bootstrap.Popover(element, {
        container: "#wrapper"
    });
});

尝试一下

注意 ：覆盖工具提示的默认容器选项值不会在页面上产生任何可见的差异。要查看实际结果，我们需要检查 DOM。按 Ctrl+Shift+I (Windows / Linux) 或 Cmd+Opt+I (Mac) 打开开发者工具或 DOM Inspector。

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

show

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

document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myPopover");

    // Create a popover instance
    var myPopover = new bootstrap.Popover(element);

    btn.addEventListener("click", function(){
        myPopover.show();
    });
});

尝试一下

hide

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

document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myPopover");

    // Create a popover instance
    var myPopover = new bootstrap.Popover(element);

    btn.addEventListener("click", function(){
        myPopover.hide();
    });
});

尝试一下

toggle

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

document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myPopover");

    // Create a popover instance
    var myPopover = new bootstrap.Popover(element);

    btn.addEventListener("click", function(){
        myPopover.toggle();
    });
});

尝试一下

dispose

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

document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myPopover");

    // Create a popover instance
    var myPopover = new bootstrap.Popover(element);

    btn.addEventListener("click", function(){
        myPopover.dispose();
    });
});

尝试一下

enable

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

document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myPopover");

    // Create a popover instance
    var myPopover = new bootstrap.Popover(element);

    btn.addEventListener("click", function(){
        myPopover.enable();
    });
});

尝试一下

disable

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

document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myPopover");

    // Create a popover instance
    var myPopover = new bootstrap.Popover(element);

    btn.addEventListener("click", function(){
        myPopover.disable();
    });
});

尝试一下

toggleEnabled

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

document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myPopover");

    // Create a popover instance
    var myPopover = new bootstrap.Popover(element);

    btn.addEventListener("click", function(){
        myPopover.toggleEnabled();
    });
});

尝试一下

update

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

document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myPopover");

    // Create a popover instance
    var myPopover = new bootstrap.Popover(element);

    btn.addEventListener("click", function(){
        myPopover.update();
    });
});

尝试一下

getInstance

这是一个静态方法，我们可以使用它获取与 DOM 元素关联的弹出框实例。

document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myPopover");

    // Trigger the popover
    var myPopover = new bootstrap.Popover(element);

    // Get popover instance on button click
    btn.addEventListener("click", function(){        
        var popover = bootstrap.Popover.getInstance(element);
        console.log(popover);
        // {_element: button#myPopover.btn.btn-primary.btn-lg, _isEnabled: true, _timeout: 0, _hoverState: null, _activeTrigger: {…}, …}
    });
});

尝试一下

getOrCreateInstance

这是一个静态方法，我们可以使用它获取与 DOM 元素关联的弹出框实例，或者在弹出框未初始化的情况下创建一个新实例。

document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myPopover");
    
    // Get or create popover instance on button click
    btn.addEventListener("click", function(){        
        var popover = bootstrap.Popover.getOrCreateInstance(element);
        console.log(popover);
        // {_element: button#myPopover.btn.btn-primary.btn-lg, _isEnabled: true, _timeout: 0, _hoverState: "", _activeTrigger: {…}, …}
    });
});

尝试一下

提示 ：不能在类的实例（即对象）上调用静态方法。他们被称为类本身。关键字 static 用于为类定义静态方法。

 Bootstrap5 弹框提示(Popovers)

Bootstrap5 警告框（Alerts） 

迹忆客计算机编程教程

Bootstrap5 弹出框(Popovers)方法

传递选项

show

hide

toggle

dispose

enable

disable

toggleEnabled

update

getInstance

getOrCreateInstance

查看笔记

Bootstrap5 弹出框(Popovers)方法

传递选项

show

hide

toggle

dispose

enable

disable

toggleEnabled

update

getInstance

getOrCreateInstance

 查看笔记

查看笔记