以编程方式显示模态 Bootstrap

Bootstrap 是一个前端框架，很多网站和Web应用都是基于Bootstrap开发的。在Bootstrap中，模态框是非常常见的组件，通常用来显示一些重要的信息、操作提示或者用户确认框。在本文中，我们将介绍如何以编程方式显示Bootstrap模态框。

原生JavaScript实现

我们先来看一个基于原生JavaScript实现的例子：

var modal = document.createElement('div');
modal.classList.add('modal', 'fade');
modal.innerHTML = `
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">模态框标题</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                模态框内容
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
`;
document.body.appendChild(modal);
var modalInstance = new bootstrap.Modal(modal);
modalInstance.show();

这段代码首先创建了一个div元素作为模态框的容器，然后通过innerHTML设置模态框的HTML内容，最后将模态框添加到文档中。接着，利用Bootstrap提供的Modal类可以很方便地创建模态框的实例，并调用show方法显示模态框。

jQuery实现

如果你的项目中已经引入了jQuery，那么使用jQuery来显示Bootstrap模态框会更简洁：

var modal = $('<div class="modal fade" tabindex="-1"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h5 class="modal-title">模态框标题</h5><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body">模态框内容</div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button><button type="button" class="btn btn-primary">保存</button></div></div></div></div>');
$('body').append(modal);
modal.modal('show');

这段代码利用jQuery的DOM操作功能创建了一个包含模态框HTML内容的div元素，然后通过调用modal方法显示模态框。

结论

以上是两种以编程方式显示Bootstrap模态框的方法，可以根据自己的需要选择适合自己的实现方式。需要注意的是，Bootstrap 5中的模态框类名由modal改成了offcanvas，需要注意一下。