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. textarea高度随着内容的多少而变化，高度可以删减

    问题:可以多行输入,并且输入框的高度随着内容的多少而变化,输入框的高度不能只增不减 由于 input 只能单行输入 textarea可以多行输入,并且高度可以随着内容的增加而增加,但是当内容删减的时候 ...

  2. python 正则，os，sys，hashlib模块

    简单的小算法 random随机获取数据 import random def getrandata(num): a=[] i= while i<num: a.append(random.randi ...

  3. Android学习——SharedPreferences

    接下来的几个博文,来介绍安卓中的数据存储方式,安卓中的数据存储主要有四种方式: 1.SharedPreferences 2.SQLite 3.Content Provider 4.File 这篇博文主 ...

  4. Android学习——ViewPager的使用（二）

    这一节介绍使用FragmentPagerAdapter适配器,来加载Fragment对象. 数据源 加载Fragment对象时,数据源自然来自Fragment,与View类似,依旧使用List来存放数 ...

  5. 思维导图与Spring Batch

    最近在学画图,又在复习Spring Batch.不解释,直接上图. 第三章,用XMind画的. 第五章,用iMindMap画的.

  6. python 带BOM头utf-8的响应解码

    接口响应编码格式为带BOM头utf-8.直接获取响应的text出现乱码. '''dinghanhua2018-11requests text与content,指定响应的encoding''' api ...

  7. 每天一个linux命令（22）：tar命令

    通过SSH访问服务器,难免会要用到压缩,解压缩,打包,解包等,这时候tar命令就是是必不可少的一个功能强大的工具.linux中最流行的tar是麻雀虽小,五脏俱全,功能强大. tar命令可以为linux ...

  8. Android（java）学习笔记47：通过反射获得构造方法并且使用

    1. 获取字节码文件对象:             Class c = Class.forName("cn.itcast_01.Person"); 2. 获取构造方法       ...

  9. POJ Air Raid 【DAG的最小不相交路径覆盖】

    传送门:http://poj.org/problem?id=1422 Air Raid Time Limit: 1000MS   Memory Limit: 10000K Total Submissi ...

  10. App版本号定义与说明基础知识

    版本控制比较普遍的三种命名格式 GNU 风格的版本号命名格式 主版本号 . 次版本号 [. 修正版本号 [. 编译版本号 ]] 示例 : 1.2.1, 2.0, 5.0.0 build-13124 W ...