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. AE常用代码（标注要素、AE中画带箭头的线、如何获得投影坐标、参考坐标、投影方式、FeatureCount注意事项）

    手上的电脑已经用了将近三年了,想入手一台Surface Pro,所以计划着把电脑上的资料整理下,部分资料打算发到博客上来,资料有同事.也有自己的.也有来自网络的,来源途径太多,也没法详细注明,请见谅! ...

  2. Android studio 配置使用maven

    安装nexus(略) 启动nexus 打开web(admin;admin123) http://127.0.0.1:8081/nexus 创建的demo 1 2 3 对应的本地目录 配置maven / ...

  3. Siebel应用数据结构层次

    在Siebel应用里数据在多个层次上使用了不同的定义方式,每一个层次侧重于数据的不同的特征,主要分为数据用户界面层定义(UI),业务逻辑层定义(Business Layer,可以是业务含义层)以及数据 ...

  4. Flask入门数据库框架flask-SQLAlchemy(十)

    ​ Web程序开发中最重要的莫过于关系型数据库,即SQL 数据库,另外文档数据库(如 mongodb).键值对数据库(如 redis)慢慢变得流行. 原因 : 我们不直接使用这些数据库引擎提供的 Py ...

  5. installed_oracle_can't_use

    Preface 1.my server is windowsxp 2.database is the oralce 10g step A.CHECK SERVER 1.win + r cmd sqlp ...

  6. June 05th 2017 Week 23rd Monday

    No great discovery was ever made without a bold guess. 没有大胆的猜测就没有伟大的发现. I've read this sentence just ...

  7. February 24 2017 Week 8 Friday

    If you fail, don't forget to learn your lesson. 如果你失败了,千万别忘了汲取教训. Frankly speaking, it is easy to ta ...

  8. March 25 2017 Week 12 Saturday

    Better master one than engage with ten. 会十事不如精一事. My colleagues think I have known a lot of things, ...

  9. 一点一点学写Makefile-1

    相信很多Linux开发者 都得自己来写Makefile,刚开始学习学写这个的时候都会碰到很多困难,我之前没有自己独立完成过Makefile,都是在公司已有的模板上添加.现在突然有一个很大的想法就是从零 ...

  10. selenium使用js进行点击

    WebElement button = driver.findElement(By.xpath("/html/body/div[1]/div[3]/h2/div[2]")); Ja ...