Bootstrap5 模态框方法详解

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

传递选项

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

让我们试试下面的例子，当用户点击背景（即模态后面的黑色覆盖区域）时，它会阻止模态框关闭。

$(document).ready(function() {
    $("#myModal").modal({
        backdrop: "static"
    });
});

尝试一下

以下示例的功能是防止模态框在按下退出键时关闭。

$(document).ready(function() {
    $("#myModal").modal({
        keyboard: false
    });
});

尝试一下

toggle

此方法可用于手动切换模态窗口。

$(document).ready(function() {
    $("#myBtn").click(function() {
        $("#myModal").modal("toggle");
    });
});

尝试一下

show

此方法可用于手动打开模态窗口。

$(document).ready(function() {
    $("#myBtn").click(function() {
        $("#myModal").modal("show");
    });
});

尝试一下

hide

此方法可用于手动隐藏模态窗口。

$(document).ready(function() {
    $("#myBtn").click(function() {
        $("#myModal").modal("hide");
    });
});

尝试一下

handleUpdate

此方法重新调整模态框的位置来应对由于视口滚动条的出现而发生的抖动，以防模态框高度发生变化，使其在打开时变得高于视口高度。

这种情况的一个常见示例是通过 JavaScript 显示模态框内的隐藏元素或在激活后使用 Ajax 加载模态内的内容。

$(document).ready(function() {
    $("#showText").click(function() {
        $("#textBlock").show();
        $("#myModal").modal("handleUpdate");
    });
});

尝试一下

dispose

此方法会破坏元素的模态框（即删除 DOM 元素上存储的数据）。

$(document).ready(function() {
    $("#myBtn").click(function() {
        var myModal = bootstrap.Modal.getInstance($("#myModal")[0]);
        console.log(myModal);
        // {_element: div#myModal.modal.fade, _config: {…}, _dialog: div.modal-dialog, _backdrop: ke, _isShown: false, …}
        
        $("#myModal").modal("dispose");
        console.log(myModal);
        // {_element: null, _config: null, _dialog: null, _backdrop: null, _isShown: null, …}
    });
});

尝试一下

getInstance

这是一个静态方法，它允许我们获取与 DOM 元素关联的模态框实例。

$(document).ready(function() {
    $("#myBtn").click(function() {
        var modal = bootstrap.Modal.getInstance($("#myModal")[0]);
        console.log(modal);
        // {_element: div#myModal.modal.fade, _config: {…}, _dialog: div.modal-dialog, _backdrop: ke, _isShown: false, …}
    });
});

尝试一下

getOrCreateInstance

这是一种静态方法，它允许我们获取与 DOM 元素关联的模态框实例，或者在模态框未初始化的情况下创建一个新实例。

$(document).ready(function() {
    $("#myBtn").click(function() {
        var modal = bootstrap.Modal.getOrCreateInstance($("#myModal")[0]);
        console.log(modal);
        // {_element: div#myModal.modal.fade, _config: {…}, _dialog: div.modal-dialog, _backdrop: ke, _isShown: false, …}
    });
});

尝试一下

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