bootstrap 模态框（modal）插件使用

2022-06-20 10:00:49

　　今天用户登陆时，在原网页上弹出新登陆窗口，发现使用的是modal插件，记录下该插件的使用方法，手写强化下。

　　首先，模态框（modal）是覆盖在父窗体上的子窗体，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下进行信息提供/交互等。

　　以代码为实例：

<h2>创建模态框（Modal）</h2>

<!-- 按钮触发模态框 -->

<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">&times;</button>

                <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>

            </div>

            <div class="modal-body">在这里添加一些文本</div>

            <div class="modal-footer">

                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

                <button type="button" class="btn btn-primary">提交更改</button>

            </div>

        </div><!-- /.modal-content -->

    </div><!-- /.modal -->

</div>

　　首先，要使用模态框，需要触发器，通常是按钮或链接。具体为：在控制器元素上设置data-toggle="modal" ，同时设置data-target="#identifier"或href="#identifier"来指定要切换的模态框（模态框内为id="#identifier"）.

　　以下是代码详细解析：

　　<button>标签

　　1）data-toggle="modal", HTML5自定义的data属性data-toggle用于打开模态窗口

　　2）data-target="#myModal"是想要在页面上加载的模态框的目标。可以在一个页面上创建多个模态框，为每个模态框创建不同的触发器。

　　<div>标签

　　1）aria-labelledby="myModalLabel" ，该属性引用模态框的标题

　　2）aria-hidden="true"用于保持模态窗口不可见，直到触发器被触发为止（比如点击在相关按钮或链接上）

　　3）class="modal-header"，modal-header是为模态窗口的头部定义样式的类

　　4）class="close"，close是一个CSS class，用于为模态窗口的关闭按钮设置样式

　　5）data-dismiss="modal"，是一个自定义的HTML5 data属性。在这里被用作关闭模态窗口

　　6）class="modal-body"，是Bootstrap CSS的一个CSS class，用于为模态窗口的主体设置样式

　　7）class="modal-footer"，是Bootstrap CSS的一个CSS class，用于为模态窗口的底部设置样式

关于模态框的详细信息可参考：http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html

码农公寓

相关文章