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. 【转载】图解MySQL MSI方式安装方法

    ********************************** 后来发现图片是百度的被封了.有空再换下吧. 一般百度经验这样的链接是不会失效的,大家可以百度查看. *************** ...

  2. css 小常识

    一.vertical-align可以采用负值(正/负值根据基线上下移动),也可以采用百分比值,而这个百分比值不是相对于字体大小或者其他什么属性计算的,而是相对于line-height计算的. 此外,w ...

  3. js贪食蛇

    <!DOCTYPE html><head><title>canvas贪食蛇</title><style>.canvas{    backgr ...

  4. IOS Google语音识别更新啦！！！

      旧版本的API:   —Google提供了一个在线语音识别的API接口,通过该API可以进行中文.英文等语言的识别.  API地址:http://www.google.com/speech-api ...

  5. wxpython 创建工具栏和菜单栏

    下面看一下关于创建工具栏,状态栏和菜单的方法,看下面一个例子: import wx class ToolBarFrame(wx.Frame): def __init__(self,parent,id) ...

  6. 如何用css将一个div设置为一个圆

    直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> ...

  7. PowerBuilder与嵌入浏览器交互

    准备工作1. 新增一个Application应用,新增一个窗口.2. 在窗口中新增一个OLE控件:Microsoft Web Browser,命名为old_1.3. 新增一个TextBox网址输入控件 ...

  8. ubuntu安装google test

    google test 简称gtest,是一个C/C++的单元测试框架,它的代码在github仓库,使用起来还是挺方便的. 安装 先确保PC上有安装cmake: sudo cmake --versio ...

  9. Codeforces Round #429

    Table of Contents A. Generous KefaB. GodsendC. Leha and Function A. Generous Kefa One day Kefa found ...

  10. react中使用css动画效果

    index.js import React, { Component, Fragment } from 'react'; class App extends Component { construct ...