1.要用bootStrap这个框架就必须要重载它的class类,也就是说class要一样

代码如下：

有疑问的可以在下面留言，欢迎大家一起交流

1.1动态模态框

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">

    <script src="bootstrap-3.3.7/js/jquery.min.js"></script>

    <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>

    <script src="bootstrap-3.3.7/js/docs.min.js"></script>

</head>

<body>

        <div class="container">

                <div class="page-header">

                    <div class="h2">bootstrap框架 <small>s</small>

                    </div>

                </div>

    <!-- 动态框 -->

<div class="modal">

    <!-- modal默认是隐藏的 -->

    <div class="modal-dialog">

        <div class="modal-content">

         <!-- 头部关闭按钮 -->

            <div class="modal-header">

                <button type="button" class="close myclose" data-dismiss="modal"><span >&times</span></button>

                <div class="h3 modal-title">标题部分</div>

                <!-- 内容部分 -->

                <div class="modal-body">

                    <P>这是内容部分</P>

                </div>

                <!-- 页脚 -->

                <div class="modal-footer">

                    <button type="button" class="btn btn-primary myclose" data-dismiss="modal">Close</button>

                    <button type="button" class="btn btn-warning myclose">save</button>

                </div>

            </div>

        </div>

    </div>

</div>

    <a href="#" class="btn btn-success" id="show">显示对话框</a>

        </div>

</body>

</html>

<script>

    $(function(){

        $('#show').click(function(){

            $('.modal').modal('show')

        })

    })

</script>

1.2静态模态框

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">

    <script src="bootstrap-3.3.7/js/jquery.min.js"></script>

    <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>

    <script src="bootstrap-3.3.7/js/docs.min.js"></script>

</head>

<body>

    <div class="container">

        <div class="page-header">

            <div class="h2">bootstrap框架 <small>s</small>

            </div>

         <!-- 静态模态框 官方有一个bug就是在写静态框的时候在按钮上要绑定同一个class-->

                <div class="modal-dialog">

                    <div class="modal-content">

                        <div class="modal-header">

                            <button type="button" class="close myclose" data-dismiss="modal">

                                <span>&times;</span>

                            </button>

                            <h3>Model标题</h3>

                     </div>

                     <!-- body部分 -->

                     <div class="modal-body">

                         <p>这是身体部分</p>

                     </div>

                     <!-- footer部分 -->

                     <div class="modal-footer">

                         <button class="btn btn-info myclose" data-dismiss="modal">close</button>

                         <button class="btn btn-primary myclose">save</button>

                     </div>

                    </div>

                </div>

           </div>

 </div>

      </div>

    </div>

</body>

</html>

<script>

    $(function(){

        $('.myclose').click(function(){

            $('.modal-dialog').css('display','none')

        })

    })

</script>

BootStrap的动态模态框及静态模态框的更多相关文章

  1. BootStrap母版页布局.子页面布局.BootstrapTable.模态框.警告框.html导出tabl生成Excel.HTML生成柱图.饼图.时间控件中文版

    如上就是很多后台管理系统的母版页布局. 左边一列模板.上面一列系统标识. 空白处充填子页面 以ASP.NET MVC为基础 引入bootstrap.js.bootstrap.css body: < ...

  2. bootstrap得动态进度条

    Bootstrap的动态进度条: html: 创建一个modal   这里使用fade先将modal隐藏起来,然后modal里面嵌入progress 代码很简单 <div class=" ...

  3. MFC编程入门之二十（常用控件：静态文本框）

    上一节讲了颜色对话框之后,关于对话框的使用和各种通用对话框的介绍就到此为止了.从本节开始将讲解各种常用控件的用法.常用控件主要包括:静态文本框.编辑框.单选按钮.复选框.分组框.列表框.组合框.图片控 ...

  4. c#中的模态对话框和非模态对话框

    模态对话框弹出窗口阻止调用窗口的所有消息响应.只有在弹出窗口结束后调用窗口才能继续.在模态窗口“关闭”后,可以读取模态窗口中信息,包括窗口的返回状态,窗口子控件的值. 非模态对话框可以在弹出窗口和调用 ...

  5. VS2010/MFC编程入门之二十（常用控件：静态文本框）

    上一节鸡啄米讲了颜色对话框之后,关于对话框的使用和各种通用对话框的介绍就到此为止了.从本节开始鸡啄米将讲解各种常用控件的用法.常用控件主要包括:静态文本框.编辑框.单选按钮.复选框.分组框.列表框.组 ...

  6. QT+模态对话框与非模态对话框

    #include "mainwindow.h" #include <QMenuBar> #include <QMenu> #include <QAct ...

  7. C#模态对话框和非模态对话框

    模态对话框弹出窗口阻止调用窗口的所有消息响应.只有在弹出窗口结束后调用窗口才能继续.在模态窗口“关闭”后,可以读取模态窗口中信息,包括窗口的返回状态,窗口子控件的值. 非模态对话框可以在弹出窗口和调用 ...

  8. VS2010-MFC（常用控件：静态文本框）

    转自:http://www.jizhuomi.com/software/179.html 关于对话框的使用和各种通用对话框的介绍就到此为止,从本节开始将讲解各种常用控件的用法.常用控件主要包括:静态文 ...

  9. 【Paddy】如何将物理表分割成动态数据表与静态数据表

    前言 一般来说,物理表的增.删.改.查都受到数据量的制约,进而影响了性能. 很多情况下,你所负责的业务关键表中,每日变动的数据库与不变动的数据量比较,相差非常大. 这里我们将变动的数据称为动态数据,不 ...

随机推荐

  1. node.js-cancelled because Node.js is unresponsive

    今天初学node.js,但是在使用vs code 进行启动调试的时候出现了一个问题 这个报错,一开始我并不知道是什么意思.(而截至我写这个笔记我也还没了解清楚) 大概翻译出来的意思是说 “node.j ...

  2. mui使用技巧

    1.document.addEventListener('plusready', function(){ //console.log("所有plus api都应该在此事件发生后调用,否则会出 ...

  3. Android上使用RecyclerView实现顶部悬浮标题效果的Sticky Title View

    目前很多的项目都在使用顶部悬浮标题的效果,很明显,这的确是一个比较人性化,用户体验效果比较好的UI交互效果,对于这个效果,有很多种实现方式,如果说要用RecyclerView来实现一个分类信息展示,并 ...

  4. sqlserver broker远端端点证书认证

    1:采用windows验证的方法: CREATE ENDPOINT InstInitiatorEndpoint STATE = STARTED AS TCP ( LISTENER_PORT = ) F ...

  5. React学习笔记 - 元素渲染

    React Learn Note 3 React学习笔记(三) 标签(空格分隔): React JavaScript 二.元素渲染 元素是构成react应用的最小单位. 元素是普通的对象. 元素是构成 ...

  6. 再学UML-UML用例建模解析（一）

    UML(统一建模语言)是当前软件开发中使用最为广泛的建模技术之一,通过使用UML可以构造软件系统的需求模型(用例模型).静态模型.动态模型和架构模型.UML通过图形和文字符号来描述一个系统,它是绘制软 ...

  7. SpringMvc-helloword

    说明:在此只说明helloword的简单实现,通过helloword例子先了解springMvc是这样工作的,然后在一步步的研究原理 配置web.xml 1.配置servlet servlet-cla ...

  8. verilog 三段式状态机的技巧

    三段式代码多,但是有时钟同步,延时少,组合逻辑跟时序逻辑分开并行出错少. (1)同步状态转移 (2)当前状态判断接下来的状态 (3)动作输出 如果程序复杂可以不止三个always   .always ...

  9. SQL的id奇迹

    SELECT id,name FROM test where name is null and id>=26 limit 26,3 这里26和26没关系,不是id额

  10. swift 协议（结合扩展）的特点

    协议的传统实现: 定义接口+实现协议    由抽象到具体: 协议的逆向实现(使用扩展): 由已存在的类型抽离部分功能作为协议,并让原体符合协议: 由具体到抽象:  向上抽离:  向上生成: 协议的缺省 ...