模态框插件

一．基本使用

使用模态框的弹窗组件需要三层div容器元素，分别为modal(模态声明层)、dialog(窗口声明层)、content(内容层)。在内容层里面，还有三层，分别为header(头部)、body(主体)、footer(注脚)。

//基本实例

<!-- 模态框声明 -->

<div class="modal fade" id="myModal" tabindex="-1">  //取消焦点

   <!-- 窗口声明 -->

   <div class="modal-dialog">

      <!-- 内容声明 -->

      <div class="modal-content">

         <div class="modal-header">

<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">2</div>

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

                </div>

            </div>

         </div>

         <div class="modal-footer">

            <button class="btn btn-default">注册</button>

            <button class="btn btn-primary">登录</button>

         </div>

      </div>

   </div>

</div>

如果想让模态框自动隐藏，然后通过点击按钮弹窗，那么需要做如下操作。

//模态框去掉show，增加一个id

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

//点击触发模态框显示

<button class="btn btn-primary btn-lg"

data-toggle="modal" data-target="#myModal">点击弹窗

</button>

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

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

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

//可设置淡入淡出效果

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

//在主体部分使用栅格系统中的流体

<!--主体-->

<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>

二．用法说明

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

1. 用法

第一种：可以通过data属性

//data-toggle

data-toggle="modal" data-target="#myModal"

data-toggle表示触发类型

data-target表示触发的节点

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

1. 参数

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

data-backdrop

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

data-keyboard

默认值true

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

data-show

默认值true

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

Href

默认值空值

如果值不是以#号开头，则表示一个url地址，加载url内容到modal-content容器里，并只加载一次。如果是#号，就是取代data-target的方法。

//空白背景且点击不关闭

data-backdrop="false"

//按下esc不关闭

data-keyboard="false"

//初始化隐藏，如果是按钮点击触发，第一次点击则无法显示，第二次显示。data-show="false"

//加载一次index.html到容器内

href="index.html"

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

Backdrop

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

keyboard默认值true,如果是true，按esc键会关闭窗口；如果是false，按esc键会不会关闭。

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

remoteurl默认值空值,路径空值远程获取指定内容填充到modal-content容器内。//通过jQuery方式声明

$('#myModal').modal({

show:true,

backdrop:false,

keyboard:false,

remote:'index.html',

});

1. 方法

如果说，默认不显示弹窗，那么怎么才能通过点击前后弹窗呢？

toggle .modal('toggle');触发时，反转切换弹窗状态

show .modal('show');触发时，显示弹窗

hide .modal('hide');触发时，关闭弹窗

//点击显示弹窗

$('#btn').on('click',function(){

$('#myModal').modal('show');

});

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

show.bs.modal在show方法调用时立即触发。

shown.bs.modal在模态框完全显示出来，并且等CSS动画完成之后触发。hide.bs.modal在hide方法调用时，但还未关闭隐藏时触发。

hidden.bs.modal在模态框完全隐藏之后，并且等CSS动画完成之后触发。$('#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('远程数据加载完毕后触发！');

});