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

 模态框由二类元素组成:

1、触发元素

2、模态框元素

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

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

 

二、定义模态框元素:

 1   <div id="modal-1" 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) 模态框支持以下二种属性:

data-keyboard = "[true | false]" 默认值true,表示按ESC键可以关闭模态框
data-backdrap = "[true | false]" 默认值true,表示显示灰色背景,同时点击背景可以关闭模态框

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) 模态框事件:

show.bs.modal 模态框准备显示前
shown.bs.modal 模态框完全显示
hide.bs.modal 模态框准备隐藏前
hidden.bs.modal 模态框隐藏之后

 

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

 

posted @ 2019-05-19 17:07 网申 阅读(...) 评论(...) 编辑 收藏