【详解】模态框，modal的使用 - bootStrap4常用CSS笔记

模态框由二类元素组成：

1、触发元素

2、模态框元素

一、定义模态框触发元素(以button为例)：

1 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-1">打开模态框</button>

二、定义模态框元素：

 1   <div  class="modal fade" tabindex="-1">
 2     <div class="modal-dialog modal-lg">
 3       <div class="modal-content" >
 4         <div class="modal-header">
 5           <div class="modal-title">这是一个标题</div>
 6           <button class="close" data-dismiss="modal">&times;</button>
 7         </div>
 8         <div class="modal-body">
 9           内容区域
10         </div>
11         <div class="modal-footer">
12           <button type="button" class="btn" data-dismiss="modal">关闭</button>
13         </div>
14       </div>
15     </div>
16   </div> 

注意：

1) 一定要给模态框加上 tabindex="-1" 属性

2) 默认模态框是四个圆角，给模态框去掉圆形边角，示例：<div class="modal-content rounded-0">

3) 模态框支持以下二种属性：

4) 模态框方法：

1  $obj.modal({
2   .backdrap = true | false , // 等同于data-backdrop
3   .keyboard = true | false // 等同于data-keyboard
4 });

1 $obj.modal( \'show | hide | toggle \');
2 // show 调用显示模态框
3 // hide 调用隐藏模态框
4 // toggle 模态框显示则隐藏，否之显示

5) 模态框事件：

bootStrap4，取消了模板框的data-remote属性，及loaded.bs.modal事件。