bootstrap 模态框（modal）

最新推荐文章于 2023-04-25 16:39:06 发布

weixin_42491847

最新推荐文章于 2023-04-25 16:39:06 发布

阅读量343

点赞数

文章标签： bootstrap java 前端

本文链接：https://blog.csdn.net/weixin_42491847/article/details/127417142

版权

该博客介绍了如何在前端项目中使用Bootstrap的模态框功能。首先，需要引入Bootstrap的CSS和JS文件，确保jQuery在前，Bootstrap在后。然后，可以通过调用`$('#myModal').modal('show')`来手动打开模态框。此外，可以监听模态框的`show.bs.modal`事件以实现在模态框显示时执行特定操作。最终，这些步骤将呈现一个有效的页面效果。

摘要由CSDN通过智能技术生成

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    开始演示模态框
</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    模态框（Modal）标题
                </h4>
            </div>
            <div class="modal-body">