Bootstrap 显示模态框

来源：互联网发布：航天税控开票软件编辑：程序博客网时间：2024/06/05 22:38

前言

最近小编在做一个项目，项目中用到了模态框的一些知识。在接触这个项目之前我是完全不知道模态框的，虽然原来可能见过，但是我不知道它是啥，这一次项目中算是揭开了它的庐山真面目。哈哈，一起来了解一下它是什么吧。

叙述

模态框（Bootstrap Modals）

Bootstrap Modals（模态框）是使用定制的 Jquery 插件创建的。它可以用来创建模态窗口丰富用户体验，或者为用户添加实用功能。您可以在 Modals（模态框）中使用 Popover（弹出框）和 Tooltip（工具提示插件）。

实例

在我们的实际生活中，当你打开某一个网页的时候，会弹出来一个框，那么这个框呢，目前在小编的认知中就是模态框啦，下面我们来看一下具体的代价

代码展示

创建一个模态框

<div class="container">     <h2>使用Bootstrap创建模态框</h2>     <div id="example" class="modal hide fade in" style="display: none; ">         <div class="modal-header">             <a class="close" data-dismiss="modal">×</a>             <h3>这是一个模态框标题</h3>         </div>         <div class="modal-body">             <h4>模态框中的文本</h4>             <p>你可以在这添加一些文本。</p>         </div>         <div class="modal-footer">             <a href="#" class="btn btn-success">唤醒活动</a>             <a href="#" class="btn" data-dismiss="modal">关闭</a>         </div>     </div>     <p><a data-toggle="modal" href="#example" class="btn btn-primary btn-large">发动演示模态框</a></p> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-modal.js"></script>

解释

下面的表格是对于上面代码的解释，它帮助我们更好的理解如何使用模态框

代码

解释

div id="example"

分配给相关 div的 id，id的值指向后边要实现 modal（模态框）的 JavaScript。

class="modal hide fade in"

Bootstrap CSS的四个 class - modal、hide、fade和 in，用于设置 modal（模态框）的布局。

style="display: none;

用于保持模态窗口可见，直到触发器触发（比如点击相关按钮）。

modal-header适用于定义模态窗口标题样式的 class。

a class="close"

CSS class close用于设置模态窗口关闭按钮的样式。

data-dismiss="modal"

data-dismiss是一个定制的 HTML5 data属性。用于关闭模态窗口。

class="modal-body"

modal-body是 Bootstrap的一个 CSS class，用于设置模态窗口主体的样式。

class="modal-footer"

modal-footer是 Bootstrap的一个 CSS class，用于设置模态窗口尾部的样式。

class="btn btn-success"

CSS class btn和 btn-success用于在模态窗口的尾部创建一个大号的按钮。您可以使用任何其他 Bootstrap按钮代替。

class="btn"

Bootstrap CSS的按钮 class btn，用于在模态窗口的尾部创建一个小号的按钮。

data-dismiss="modal"

HTML5定制的 data属性 data-dismiss，用于关闭模态窗口。

data-toggle="modal"

HTML5定制的 data属性 data-toggle，用于打开模态窗口。

class="btn btn-primary btn-large"

设置按钮样式，点击该按钮则创建模态窗口。

引用 Jquery文件。

引用 bootstrap modal（模态框）的 JS文件。

Bootstrap多层模态框如何嵌套

<!DOCTYPE html>  <html>        <head>          <meta charset='utf-8'>          <title>bootstrap模态框(modal)</title>          <link href="../../css/bootstrap.min.css" rel="stylesheet">          <script src="../../js/jquery-2.1.1.min.js"></script>          <script src="../../js/bootstrap.min.js"></script>          <!--jquery必须是1.9.0版本以上的    -->          <script>              $(function(){                        $("#btn2").click(function(){                                                  $("#show2").modal("show");                     });                                  })          </script>      </head>        <body>            <div class="container ">                <h1 class="page-header">bootstrap模态框(modal)</h1>                <button class="btn btn-primary" data-toggle='modal' data-target='#show'>登陆</button>                <div class="modal fade  " id='show' >                  <div class="modal-dialog">                      <div class="modal-content">                            <button class="close" data-dismiss='modal'>×</button>                          <h1 class="modal-title">一层模态框</h1>                          <div class="modal-footer">                              <button class="btn btn-primary" data-toggle='modal' id="btn2">再弹</button>                          </div>                      </div>                  </div>              </div>                <div class="modal fade  " id='show2'>                  <div class="modal-dialog">                      <div class="modal-content">                            <button class="close" data-dismiss='modal'>×</button>                              <h1 class="modal-title">二层模态框</h1>                          <div class="modal-body">                              12312312                          </div>                          <div class="modal-footer">                                                        </div>                      </div>                  </div>              </div>          </div>      </body>  </html>

小结

以上内容只是我在项目中的一点点小小的内容，参加项目的收获远远的大于此，其中对于一个人的心智会有很大的提升，一定要多多的锻炼自己啊。

阅读全文

0 0