bootstrap前端页面使用模态框（modal）弹出层

最新推荐文章于 2024-07-20 17:41:17 发布

Jehue

最新推荐文章于 2024-07-20 17:41:17 发布

阅读量2.4k

点赞数

文章标签： bootstrap 模态框 modal

本文链接：https://blog.csdn.net/m18870420619/article/details/82257328

版权

本文介绍了如何在Bootstrap前端页面中使用模态框（Modal）弹出层。内容包括添加必要的JS文件，以及在页面上创建按钮和模态框的步骤。通过设置CSS样式，如.modal-body的高度和.modal.fade.in的顶部位置，实现了模态框的滚动功能和定位。

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

1，添加js文件

<script type="text/javascript" src="/H-ui.admin/lib/jquery/1.9.1/jquery.min.js?version=0.001"></script> 
<script type="text/javascript"  src="/H-ui.admin/lib/bootstrap-modal/2.2.4/bootstrap.js"></script>

2，页面添加按钮和弹出层

<div>
     <button data-toggle="modal" data-target="#myModal" class="btn btn-success radius ml-50" type="button">弹出或隐藏</button>
</div>


<div class="modal fade" id="myModal" tabindex="-10000" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" style="padding-bottom: 0px;">