Bootstrap模态框学习笔记

最新推荐文章于 2025-05-19 21:36:04 发布

甄岩岩

最新推荐文章于 2025-05-19 21:36:04 发布

阅读量231

点赞数

CC 4.0 BY-SA版权

分类专栏： BOOTSTRAP

本文链接：https://blog.youkuaiyun.com/zyy3976/article/details/81018267

BOOTSTRAP 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了模态框的基本概念及其实现方式。模态框作为网页中的子窗体，通常用于显示问题并进行简单的交互操作，而无需离开当前页面。文章详细说明了如何使用HTML与相关属性创建模态框，包括控制按钮、对话框样式及其内部结构。

<!--创建模态框(modal)-->
<!--什么是模态框(modal)？模态框就是覆盖在父窗体上的子窗体。通常是用来显示一个单独的问题，在不脱离父页面的情况下有
一些互动-->
<!--为模态框添加一个控制元素button或者a等等，控制元素中添加data-toggla='modal'用于打开模态窗口,添加data-target=
'#layer'或者href='#layer'用来选择打开哪一个模态框，一个页面上可以同时存在多个模态框。-->
<button class="btn btn-primary btn-lg " data-toggle="modal" data-target="#layer">显示Modal</button>
<!-- 创建一个模态框，role指定dialog，class指定modal，aria-hidden='true'保持模态框未被点击前保持不可见-->
<div class="modal fade" role="dialog" aria-hidden="true" aria-labelledby="myModalLabel" id="layer">
    <!--从外至内依次包括modal-dialog>modal-content>modal-header==modal-body==modal-footer-->
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <!--data-dismiss是一个H5属性，这里用来关闭modal-->
                <button type="button" class="close" data-dismiss="modal">
                    &times;
                </button>
                <h4>Modal标题</h4>
            </div>
            <div class="modal-body">Somethingelse</div>
            <div class="modal-footer">
                <input type="button" class="btn btn-info" value="取消" data-dismiss="modal"/>
                <input type="button" class="btn btn-warning" value="确认" data-dismiss="modal"/>
            </div>
        </div>
    </div>
</div>