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. stroke和fill顺序对绘图的影响

    用canvas绘制线条和填充,fill()和stroke()调用顺序直接影响绘制的结构 先调用stroke在调用fill,绘制的效果看上去lineWidth只绘制出来一半,还以为是个大问题. < ...

  2. javascript对象(2)

    这个对象,不是那个对象.续更第二篇.. 昨天说了对象的基本概念以及创建,今天来说一下它的其他方法: 1.访问属性的两种方式:点语法.[]语法 var dog =new Object(); dog.na ...

  3. 04_Spring中使用Quartz

    [Spring中使用SimplerTrigger] [QuartzTask.java] package com.higgin.task; import java.text.SimpleDateForm ...

  4. python 后台服务

    centos 6x #!/bin/sh # chkconfig: 123456 90 10 # TTS Server for Speech Synthesis # workdir=/etc/speec ...

  5. mongodb 3.4 学习 (三）复制集

    复制集(replica set) 复制集是一组mongodb的进程维护同样的数据集,提供冗余与高可用性.最小的复制集由3台服务器(或者3个实例)组成,最多1个primary和2个secondary实例 ...

  6. python：Non-ASCII character ‘\xe2′ in file

    python 2.7系列的  在运行.py文件时 报错python:Non-ASCII character ‘\xe2′ in file 解决办法:  在文件顶部 加入  #  coding: utf ...

  7. DeepQA websocket 并发测试

    var client = new Array(); var W3CWebSocket = new Array(); var concurrent = 2; for (var i = 0; i < ...

  8. Lucas 大组合数

    题目:HDU 3037 题意:有n个树,m个坚果,放到n个树里,可以不放完,有多少种方法. 分析: 得到组合数了. 大组合数什么费马小定理,Lucas定理都来了: 总的说,不能用二维地推了,用的却是组 ...

  9. 检查WIFI是否连接

    查看网络连接 查看WiFi连接状态 (连接- -断开)

  10. c++字符串初始化

    #include<string> string s1 = "abcdefg"; string s2("abcdefg");