Bootstrap模态框插件

缺乏、安全感 2022-06-12 05:57 350阅读 0赞

> 模态框插件：交互式网站常见的弹框功能插件

一、基本使用：

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

*  modal（模态声明层）
 *  dialog（窗口声明层）
 *  body（主体）
 *  footer（注脚）

<div class="modal show fade" tabindex="-1">
        
        
        <div class="modal-dialog">
            
            <div class="modal-content">
                
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span>×</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>

效果图：  
![效果图][SouthEast]

*如果模态框（modal）不设置tabindex=”-1”，可以通过tab键切换除模态框外的其他元素的焦点，模态框设置了tabindex=’-1’，tab键只能切换模态框内的元素的焦点。*

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

<div class="modal fade" id="myModal" tabindex="-1">
    
    
    <button class="btn btn-primary btn-lg" id="btn" data-toggle="modal" data-target="#myModal">点击弹窗</button>

二、用法说明  
所有插件都是基于Javascript/jQuery的，那么就有四个要素：用法、参数、方法和事件。

> 用法：通过data属性，如果不是使用button，而是a，其中的data-target也可以使用href=”\#myModal”取代，建议使用data-target

//表示触发类型
    data-toggle="modal"
    //表示触发的节点 
    data-target="#myModal"

> 参数：通过在HTML元素上设置data-\*的属性声明来控制效果。

<table> 
 <thead> 
  <tr> 
   <th>属性名称</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>data-backdrop</td> 
   <td>布尔值或’static’</td> 
   <td>true</td> 
   <td>默认值 true，表示背景存在黑灰透明遮罩，且单击空白背景可关闭弹窗；如果为 false，表示背景不存在黑灰透明遮罩，且点击空白背景不可关闭弹窗；如果是字符串’static’，表示背景存在黑灰透明遮罩，且点击空白不可关闭弹窗。</td> 
  </tr> 
  <tr> 
   <td>data-keyboard</td> 
   <td>布尔值</td> 
   <td>true</td> 
   <td>如果是 true，按 esc 键会关闭窗口；如果是 false，按 esc 键会不会关闭。</td> 
  </tr> 
  <tr> 
   <td>data-show</td> 
   <td>布尔值</td> 
   <td>true</td> 
   <td>如果是 true，初始化时，默认显示；如果是 false，初始化时，默认隐藏</td> 
  </tr> 
  <tr> 
   <td>href</td> 
   <td>url路径</td> 
   <td>true</td> 
   <td>如果值不是以#号开头，则表示一个url 地址，加载 url 内容到modal-content 容器里，并只加载一次。如果是#号，就是取代data-target 的方法</td> 
  </tr> 
 </tbody> 
</table>

//空白背景且点击不关闭
    data-backdrop="false"
    //按下 esc 不关闭 
    data-keyboard="false"
    //初始化隐藏，如果是按钮点击触发，第一次点击则无法显示，第二次显示。
    data-show="false"
    //加载一次 index.html 到容器内 
    href="index.html"

也可以在javascript直接设置

<table> 
 <thead> 
  <tr> 
   <th>属性名称</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>backdrop</td> 
   <td>布尔值或’static’</td> 
   <td>true</td> 
   <td>默认值 true，表示背景存在黑灰透明遮罩，且单击空白背景可关闭弹窗；如果为 false，表示背景不存在黑灰透明遮罩，且点击空白背景不可关闭弹窗；如果是字符串’static’，表示背景存在黑灰透明遮罩，且点击空白不可关闭弹窗。</td> 
  </tr> 
  <tr> 
   <td>keyboard</td> 
   <td>布尔值</td> 
   <td>true</td> 
   <td>如果是 true，按 esc 键会关闭窗口；如果是 false，按 esc 键会不会关闭。</td> 
  </tr> 
  <tr> 
   <td>show</td> 
   <td>布尔值</td> 
   <td>true</td> 
   <td>如果是 true，初始化时，默认显示；如果是 false，初始化时，默认隐藏</td> 
  </tr> 
  <tr> 
   <td>remote</td> 
   <td>url路径</td> 
   <td>空值</td> 
   <td>远程获取指定内容填充到modal-content容器中</td> 
  </tr> 
 </tbody> 
</table>

$('#myModal').modal({
        show : true,
        backdrop : false,
        keyboard : false,
        remote : 'index.html',
    });

> 方法：如果不默认显示弹窗，怎样才能通过点击前后弹窗？

<table> 
 <thead> 
  <tr> 
   <th>参数名称</th> 
   <th>使用方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>toggle</td> 
   <td>.modal(‘toggle’)</td> 
   <td>触发时，反转切换弹窗状态</td> 
  </tr> 
  <tr> 
   <td>show</td> 
   <td>.modal(‘show’)</td> 
   <td>触发时，显示弹窗</td> 
  </tr> 
  <tr> 
   <td>hide</td> 
   <td>,modal(‘hide’)</td> 
   <td>触发时，关闭弹窗</td> 
  </tr> 
 </tbody> 
</table>

//点击显示弹窗
    $('#btn').on('click', function () { 
        $('#myModal').modal('show');
    });

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

<table> 
 <thead> 
  <tr> 
   <th>事件类型</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>show.bs.modal</td> 
   <td>在 show 方法调用时立即触发</td> 
  </tr> 
  <tr> 
   <td>shown.bs.modal</td> 
   <td>在模态框完全显示出来，并且等 CSS 动画完成之后触发</td> 
  </tr> 
  <tr> 
   <td>hide.bs.modal</td> 
   <td>在 hide 方法调用时，但还未关闭隐藏时触发。</td> 
  </tr> 
  <tr> 
   <td>hidden.bs.modal</td> 
   <td>在模态框完全隐藏之后，并且等 CSS 动画完成之后触发</td> 
  </tr> 
  <tr> 
   <td>loaded.bs.modal</td> 
   <td>在远程数据加载完毕后触发。加载页面时远程数据也被加载完毕</td> 
  </tr> 
 </tbody> 
</table>

[SouthEast]: /images/20220612/546a4065fb1242c3a79afdbba85e4629.png