Bootstrap 显示模态框

最新推荐文章于 2024-02-05 02:23:43 发布

Hi-Sunshine

最新推荐文章于 2024-02-05 02:23:43 发布

阅读量2.9k

点赞数

文章标签： bootstrap javascript html

本文链接：https://blog.csdn.net/zmh458/article/details/77616699

版权

★项目实践同时被 2 个专栏收录

5 篇文章 1 订阅

订阅专栏

——【积分系统】

1 篇文章 0 订阅

订阅专栏

前言

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

叙述

模态框（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;	用于保持模态窗口可见，直到触发器触发（比如点击相关按钮）。
<div class="modal-header">	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"	设置按钮样式，点击该按钮则创建模态窗口。
<script src="https://ajax.googleapis.com/ajax/libs /jquery/1.7.1/jquery.min.js"></script>	引用 Jquery文件。
<script src="../bootstrap/twitter-bootstrap-v2> /js/bootstrap-modal.js"></script>	引用 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> 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>

小结

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

Hi-Sunshine

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
14
评论
Bootstrap 显示模态框

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

扫一扫