Bootstrap模态框插件

学习要点：

　　1.基本使用

　　2.用法说明

本节课我们主要学习一下 Bootstrap 中的模态框插件，这是一款交互式网站非常常见的 弹窗功能插件。

一．基本使用

使用模态框的弹窗组件需要三层 div 容器元素：

　　1分别为 modal(模态声明层)、

　　2dialog(窗口声明层)、

　　3content(内容层)。

在内容层里面，还有三层：

　　1分别为 header(头 部)、

　　2body(主体)、

　　3footer(注脚)。

modal样式class类，写在声明模态框<div>里，模态框区块声明(Bootstrap)
show样式class类，写在声明模态框<div>里，表示模态框显示,默认模态框是隐藏的(Bootstrap)
modal-dialog样式class类，写在声明模态框窗口<div>里，模态框窗口区域声明(Bootstrap)
modal-content样式class类，写在声明模态框内容<div>里，模态框内容区域声明(Bootstrap)
modal-header样式class类，写在模态框内容里头部<div>里，模态框内容头部区域样式(Bootstrap)
close样式class类，写在模态框头部<button>里，模态框内容头部区域关闭按钮样式(Bootstrap)
data-dismiss="modal"模态框事件点击后关闭模态框，写在模态框关闭按钮<button>里(Bootstrap)
modal-title样式class类，写在模态框头部<h1-h4>里，模态框内容头部区域标题样式(Bootstrap)
modal-body样式class类，写在模态框主体<div>里，设置模态框主体样式(Bootstrap)
modal-footer样式class类，写在模态框底部<div>里，设置模态框底部样式(Bootstrap)

<div class="modal show">                                                    <!--modal模态框区块声明，show表示模态框显示 -->

    <div class="modal-dialog">                                              <!--modal-dialog模态框窗口区域声明 -->

        <div class="modal-content">                                         <!--modal-content模态框内容区域声明 -->

            <div class="modal-header">                                      <!--modal-header模态框内容头部区域样式-->

                <button type="button" class="close" data-dismiss="modal">   <!--close模态框内容头部区域关闭按钮样式，data-dismiss="modal"事件点击后关闭模态框-->

                    <span>&times;</span>

                </button>

                <h4 class="modal-title">会员登录</h4>                        <!--modal-title模态框内容头部区域标题样式-->

            </div>

            <div class="modal-body">                                        <!--modal-body设置模态框主体样式-->

                <p>暂时无法登录会员</p>

            </div>

            <div class="modal-footer">                                      <!--modal-footer设置模态框底部样式 -->

                <button type="button" class="btn btn-default">

                    注册

                </button>

                <button type="button" class="btn btn-primary">

                    登录

                </button>

            </div>

        </div>

    </div>

</div>

让模态框自动隐藏，然后通过点击按钮弹窗

data-toggle="modal"声明事件切换类型，modal表示模态框类型，写在<button>里(Bootstrap)
data-target="#myModal">声明事件操作对象，#myModal表示点击后关闭id为#myModal的元素，写在<button>里(Bootstrap)

<div class="modal" id="myModal">                                                <!--模态框去掉 show，增加一个 id-->

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">

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

                    <span>&times;</span>

                </button>

                <h4 class="modal-title">会员登录</h4>

            </div>

            <div class="modal-body">

                <p>暂时无法登录会员</p>

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-default">

                    注册

                </button>

                <button type="button" class="btn btn-primary">

                    登录

                </button>

            </div>

        </div>

    </div>

</div>

<!--data-toggle="modal"声明事件切换类型，modal表示模态框类型(Bootstrap)-->

<!--data-target="#myModal">声明事件操作对象，#myModal表示点击后关闭id为#myModal的元素(Bootstrap)-->

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">

    点击弹窗

</button>

点击后

模态框弹窗大小

弹窗的大小有三种，默认情况下是正常，还有 lg(大)和 sm(小)

modal-lg样式class类，写在模态框窗口区域声明<div>里，模态框大尺寸(Bootstrap)
modal-sm样式class类，写在模态框窗口区域声明<div>里，模态框小尺寸(Bootstrap)

<div class="modal" id="myModal">

    <div class="modal-dialog modal-sm">

        <div class="modal-content">

            <div class="modal-header">

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

                    <span>&times;</span>

                </button>

                <h4 class="modal-title">会员登录</h4>

            </div>

            <div class="modal-body">

                <p>暂时无法登录会员</p>

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-default">

                    注册

                </button>

                <button type="button" class="btn btn-primary">

                    登录

                </button>

            </div>

        </div>

    </div>

</div>

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">

    点击弹窗

</button>

模态框弹窗淡入淡出效果

fade样式class类，写在声明模态框<div>里，设置模态框弹窗淡入淡出效果(Bootstrap)

<div class="modal fade" id="myModal">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">

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

                    <span>&times;</span>

                </button>

                <h4 class="modal-title">会员登录</h4>

            </div>

            <div class="modal-body">

                <p>暂时无法登录会员</p>

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-default">

                    注册

                </button>

                <button type="button" class="btn btn-primary">

                    登录

                </button>

            </div>

        </div>

    </div>

</div>

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">

    点击弹窗

</button>

模态框在主体部分使用栅格系统中的流体

<div class="modal fade" id="myModal">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">

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

                    <span>&times;</span>

                </button>

                <h4 class="modal-title">会员登录</h4>

            </div>

            <!--在模态框主体里使用流体删格系统-->

            <div class="modal-body">

                <div class="container-fluid">

                    <div class="row">

                        <div class="col-md-4">1</div>

                        <div class="col-md-4">1</div>

                        <div class="col-md-4">1</div>

                    </div>

                </div>

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-default">

                    注册

                </button>

                <button type="button" class="btn btn-primary">

                    登录

                </button>

            </div>

        </div>

    </div>

</div>

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">

    点击弹窗

</button>

二．用法说明

基本使用介绍结束之后，我们就来看下插件的各种重要用法。所有的插件，都是基于 JavaScript/jQuery 的。那么，就有四个要素：用法、参数、方法和事件。

1.用法

第一种：可以通过 data 属性，在触发模态框按钮上使用

data-toggle 表示触发类型

data-target 表示触发的节点

<div class="modal fade" id="myModal">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">

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

                    <span>&times;</span>

                </button>

                <h4 class="modal-title">会员登录</h4>

            </div>

            <!--在模态框主体里使用流体删格系统-->

            <div class="modal-body">

                <div class="container-fluid">

                    <div class="row">

                        <div class="col-md-4">1</div>

                        <div class="col-md-4">1</div>

                        <div class="col-md-4">1</div>

                    </div>

                </div>

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-default">

                    注册

                </button>

                <button type="button" class="btn btn-primary">

                    登录

                </button>

            </div>

        </div>

    </div>

</div>

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">

    点击弹窗

</button>

如果不是使用<button>，而是<a>，其中 data-target 也可以使用 href="#myModal"，取代。当然，我们建议使用 data-target。除了 data-toggle 和 data-target 两个声明 属性外，还有一些可以用选项。

2.选用参数，写在触发模态框的按钮里

可以通过在 HTML 元素上设置 data-*的属性声明来控制效果。

data-backdrop 布尔值或'static' true默认值 true，表示背景存在黑灰透明遮罩，且单击空白背景可关闭弹窗；如果为 false，表示背景不存在黑灰透明遮罩，且点击空白背景不可关闭弹窗；如果是字符串'static'，表示背景存在黑灰透明遮罩，且点击空白不可关闭弹窗。

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-backdrop="true">

    点击弹窗

</button>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-backdrop="false">

    点击弹窗

</button>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-backdrop="static">

    点击弹窗

</button>

data-keyboard 布尔值 true 如果是 true，按 esc 键会关闭窗口；如果是 false，按 esc 键会不会关闭。

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-backdrop='static' data-keyboard="false">

    点击弹窗

</button>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-backdrop='static' data-keyboard="true">

    点击弹窗

</button>

data-show 布尔值 true 如果是 true，初始化时，默认显示；如果是 false，初始化时，默认隐藏。

在按钮触发，不是很明显

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-show="true">

    点击弹窗

</button>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-show="false">

    点击弹窗

</button>

href url 路径 空值如果值不是以#号开头，则表示一个url 地址，加载 url 内容到modal-content 模态框内容区域div里，并只加载一次。如果是#号，就是取代data-target 的方法。

如果值是以#开头就是代替data-target属性后面跟事件指向id名称

<button class="btn btn-primary btn-lg" data-toggle="modal" data-backdrop="static" href="#myModal">

    点击弹窗

</button>

如果href值不是以#开头，是一个远程地址如bfq.html，就是将远程bfq.html文件里的内容加载到modal-content 模态框内容区域div里

bfq.html文件

<div class="modal-header">

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

        <span>&times;</span>

    </button>

    <h4 class="modal-title">远程加载</h4>

</div>

<!--在模态框主体里使用流体删格系统-->

<div class="modal-body">

    <div class="container-fluid">

        <div class="row">

            <div class="col-md-4">6</div>

            <div class="col-md-4">6</div>

            <div class="col-md-4">6</div>

        </div>

    </div>

</div>

<div class="modal-footer">

    <button type="button" class="btn btn-default">

        注册

    </button>

    <button type="button" class="btn btn-primary">

        登录

    </button>

</div>

模态框页面

<div class="modal fade" id="myModal">

    <div class="modal-dialog">

        <div class="modal-content">

            <!--<div class="modal-header">

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

                    <span>&times;</span>

                </button>

                <h4 class="modal-title">会员登录</h4>

            </div>

            &lt;!&ndash;在模态框主体里使用流体删格系统&ndash;&gt;

            <div class="modal-body">

                <div class="container-fluid">

                    <div class="row">

                        <div class="col-md-4">1</div>

                        <div class="col-md-4">1</div>

                        <div class="col-md-4">1</div>

                    </div>

                </div>

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-default">

                    注册

                </button>

                <button type="button" class="btn btn-primary">

                    登录

                </button>

            </div>-->

        </div>

    </div>

</div>

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-backdrop="static" href="bfq.html">

    点击弹窗

</button>

当然，也可以在 JavaScript 直接设置。

modal()将指定元素执行模态框方法，参数是一个对象，里写各种需要属性参数(Bootstrap)

backdrop 布尔值或'static'true默认值 true，表示背景存在黑灰透明遮罩，且单击空白背景可关闭弹窗；如果为 false，表示背景不存在黑灰透明遮罩，且点击空白背景不可关闭弹窗；如果是字符串'static'，表示背景存在黑灰透明遮罩，且点击空白不可关闭弹窗。

keyboard 布尔值 true 如果是 true，按 esc 键会关闭窗口；如果是 false，按 esc 键会不会关闭。

show 布尔值 true 如果是 true，初始化时，默认显示；如果是 false，初始化时，默认隐藏。

remote #路径 url远程获取指定内容填充到modal-content 容器内。

bfq.html文件

<div class="modal-header">

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

        <span>&times;</span>

    </button>

    <h4 class="modal-title">远程加载</h4>

</div>

<!--在模态框主体里使用流体删格系统-->

<div class="modal-body">

    <div class="container-fluid">

        <div class="row">

            <div class="col-md-4">6</div>

            <div class="col-md-4">6</div>

            <div class="col-md-4">6</div>

        </div>

    </div>

</div>

<div class="modal-footer">

    <button type="button" class="btn btn-default">

        注册

    </button>

    <button type="button" class="btn btn-primary">

        登录

    </button>

</div>

模态框页面

<div class="modal fade" id="myModal">

    <div class="modal-dialog">

        <div class="modal-content">

        </div>

    </div>

</div>

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">

    点击弹窗

</button>

js文件

$(function () {

    $('#myModal').modal({

        backdrop:"static",  //背景存在黑灰透明遮罩，且点击空白不可关闭弹窗。

        keyboard:false,     //false，按 esc 键会不会关闭模态框

        show:false,         //如果是 false，初始化时，默认隐藏

        remote:"bfq.html"   //远程获取指定内容填充到modal-content 容器内

    });

});

3.方法

toggle .modal('toggle'); 触发时，反转切换弹窗状态(Bootstrap)
show .modal('show'); 触发时，显示弹窗(Bootstrap)
hide .modal('hide'); 触发时，关闭弹窗(Bootstrap)

<div class="modal fade" id="myModal">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">

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

                    <span>&times;</span>

                </button>

                <h4 class="modal-title">会员登录</h4>

            </div>

            <!--在模态框主体里使用流体删格系统-->

            <div class="modal-body">

                <div class="container-fluid">

                    <div class="row">

                        <div class="col-md-4">1</div>

                        <div class="col-md-4">1</div>

                        <div class="col-md-4">1</div>

                    </div>

                </div>

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-default">

                    注册

                </button>

                <button type="button" class="btn btn-primary">

                    登录

                </button>

            </div>

        </div>

    </div>

</div>

<button class="btn btn-primary btn-lg" id="sdfg">

    点击弹窗

</button>

js

$(function () {

    $('#sdfg').on('click', function () {  //获取按钮执行点击事件

        $('#myModal').modal('show');      //点击按钮后将模态框，反转切换弹窗状态，也就是隐藏显示切换

    });

    $('#myModal').modal({

        backdrop:"static",  //背景存在黑灰透明遮罩，且点击空白不可关闭弹窗。

        keyboard:false,     //false，按 esc 键会不会关闭模态框

        show:false,         //如果是 false，初始化时，默认隐藏

    });

});

其他两个方法使用相同

4.事件

模态框支持 4 种事件，分别对应弹出前、弹出后、关闭前和关闭后。

show.bs.modal 在 show 方法调用时立即触发。(Bootstrap)
shown.bs.modal 在模态框完全显示出来，并且等 CSS 动画完成之后触发。(Bootstrap)
hide.bs.modal 在 hide 方法调用时，但还未关闭隐藏时触发。(Bootstrap)
hidden.bs.modal 在模态框完全隐藏之后，并且等 CSS 动画完成之后触发。(Bootstrap)
loaded.bs.modal '远程数据加载完毕后触发(Bootstrap)

js

$(function () {

    $('#sdfg').on('click', function () {  //获取按钮执行点击事件

        $('#myModal').modal('show');      //点击按钮后将模态框，反转切换弹窗状态，也就是隐藏显示切换

    });

    $('#myModal').modal({

        backdrop:"static",  //背景存在黑灰透明遮罩，且点击空白不可关闭弹窗。

        keyboard:false,     //false，按 esc 键会不会关闭模态框

        show:false,         //如果是 false，初始化时，默认隐藏

    });

    $('#myModal').on('show.bs.modal', function () {

        alert('在 show 方法调用时立即触发！');

    });

    $('#myModal').on('shown.bs.modal', function () {

        alert('在模态框显示完毕后触发！');

    });

    $('#myModal').on('hide.bs.modal', function () {

        alert('在 hide 方法调用时立即触发！');

    });

    $('#myModal').on('hiden.bs.modal', function () {

        alert('在模态框显示完毕后触发！');

    });

    $('#myModal').on('loaded.bs.modal', function () {

        alert('远程数据加载完毕后触发！');

    });

});

HTML

<div class="modal fade" id="myModal">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">

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

                    <span>&times;</span>

                </button>

                <h4 class="modal-title">会员登录</h4>

            </div>

            <!--在模态框主体里使用流体删格系统-->

            <div class="modal-body">

                <div class="container-fluid">

                    <div class="row">

                        <div class="col-md-4">1</div>

                        <div class="col-md-4">1</div>

                        <div class="col-md-4">1</div>

                    </div>

                </div>

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-default">

                    注册

                </button>

                <button type="button" class="btn btn-primary">

                    登录

                </button>

            </div>

        </div>

    </div>

</div>

<button class="btn btn-primary btn-lg" id="sdfg">

    点击弹窗

</button>

第二百四十三节，Bootstrap模态框插件的更多相关文章

  1. Bootstrap 模态框插件

    一．基本使用 使用模态框的弹窗组件需要三层 div 容器元素,分别为 modal(模态声明层). dialog(窗口声明层).content(内容层).在内容层里面,还有三层,分别为 header(头 ...

  2. 第二百四十九节，Bootstrap附加导航插件

    第二百四十九节,Bootstrap附加导航插件 学习要点: 1.附加导航插件 本节课我们主要学习一下 Bootstrap 中的附加导航插件 一．附加导航 注意:此插件要使用 bootstrap3.0. ...

  3. Bootstrap 模态框（Modal）插件

    原文链接:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html Bootstrap 模态框(Modal)插件 模态框(Modal)是覆 ...

  4. js控制Bootstrap 模态框（Modal）插件

    js控制Bootstrap 模态框(Modal)插件 http://www.cnblogs.com/zzjeny/p/5564400.html

  5. bootstrap模态框modal使用remote第二次加载显示相同内容解决办法

    bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法 bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 ...

  6. Bootstrap模态框（MVC）

    BZ这篇博客主要是为大家介绍一下MVC如何弹出模态框.本文如果有什么不对的地方,希望大神们多多指教,也希望和我一样的小菜多多学习.BZ在这里谢过各位. 首先要在页面加上一个点击事件: @Html.Ac ...

  7. 前端之bootstrap模态框

    简介:模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. Modal简介 Modal实现弹出表单 M ...

  8. 对bootstrap模态框的小尝试

    bootstrap中有一个“模态框”插件,我理解的意思就是一个具有全局遮罩的弹窗提示,官方解释是:模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗 ...

  9. BootStrap 模态框基本用法

    <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 模态框(Modal)插件方法</title ...

随机推荐

  1. Maven版本的ssm框架项目常见依赖pom.xml

    <properties> <junit.version>4.12</junit.version> <spring.version>4.3.1.RELEA ...

  2. iOS mac添加证书 不能修改“System Roots”钥匙串错误

    iOS mac添加证书 不能修改“System Roots”钥匙串错误 如图: 解决方式: 打开钥匙串---登录---,直接把证书拖过来 然后,查看--我的证书,里面,找到证书,即可

  3. 算法笔记_124:密码脱落（Java）

    一 问题描述 X星球的考古学家发现了一批古代留下来的密码.这些密码是由A.B.C.D 四种植物的种子串成的序列.仔细分析发现,这些密码串当初应该是前后对称的(也就是我们说的镜像串).由于年代久远,其中 ...

  4. ant-design getFieldDecorator 无法获取自定义组件的值

    1.自定义或第三方的表单控件,也可以与 Form 组件一起使用.只要该组件遵循以下的约定: (1)提供受控属性 value 或其它与 valuePropName 的值同名的属性. (2)提供 onCh ...

  5. 解决——CSS :before、:after ，当content使用中文时有时候会出现乱码

    问题: 在进行页面开发时,经常会使用:before, :after伪元素创建一些小tips,但是在:before或:after的content属性使用中文的话,会导致某些浏览器上出现乱码. 例如我遇到 ...

  6. canvas学习笔记（上篇）-- canvas入门教程 -- canvas标签/方块/描边/路径/圆形/曲线

    [上篇] -- 建议学习时间4小时  课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...

  7. ExtJS学习------Ext.define的继承extend，用javascript实现相似Ext的继承

    (1)Ext.define的继承extend 详细实例: Ext.onReady(function(){ //Sup Class 父类 Ext.define('Person',{ config:{ n ...

  8. pandas所占内存释放

    df = pd.read_csv('....') 要调用循环处理多个文件时,内存占用情况严重,如果互相之间不需要调用,可以直接del df  释放内存

  9. Java并发编程（六）：Java里实现对象安全发布的四种方式

    接上篇,首先要了解什么是对象的发布与逸出? Java里安全发布对象的四种方法1.单例(注意懒汉和饿汉的区别)2.静态属性,注意类里的静态域和静态代码块的顺序有要求3.枚举4.final

  10. ArcGIS教程：将“替换为模型”工具用于多面体

    替换为模型工具出如今 3D 编辑器 工具条上的 3D 编辑器菜单中.而且仅仅适用于多面体要素.使用此命令可将所选的一个或多个要素的几何替换为磁盘中所保存的 3D 模型文件.受支持的 3D 模型类型包含 ...