作者:张铭标
撰写时间:2019年 6月3日
- Bootstrap模态框主要分为三部分:modal-header,.modal-body,.modal-footer.
- 在使用之前需要引入一些插件:
bootstrap.bundle.js,jquery插件和bootstrap.css.这几个插件才能够使用.下面是模态框的基本代码:
效果图:
这是模态框的基本用法,在使用模态框的时候注意要尽量加上一些明显的关闭按钮,当然点击模态框的backdrop也就是灰色背景区域也可以自动关闭模态框,但最好加上一些关闭按钮对后面程序的开发比较有帮助.
在模态框中可以使用栅格系统,只要在.modal-body里面加入.container-fluid即可.
如果只需要弹出模态框而不用淡入淡出的效果,只要在modal元素中移除.fade即可.
我们可以通过JavaScript调用id来打开动态模态框,经典代码:
function
openmodal(){
//打开模态框
$(‘#mymodal’).modal(“show”);
}
模态框也可以调节大小,通过modal-dialog modal-lg和modal-dialog modal-sm来选择它的大小,通常用大的模态框居多.模态框是默认有滚动条的,如果你不需要滚动条可以设置下面的代码来实现,它会自动帮你重新调整模态框的位置而没有滚动条:
$(‘#myModal’).modal(‘handleUpdate’)
- 下面我们进行一些实操例子来具体说明模态框的使用:
一.
一般的模态框
首先引入一些必须的jquery插件,bootstrap插件和样式.之后编写模态框代码如下图:
由图可见模态框的基本代码,这里我顺便加上了一个button按钮通过点击事件来打开这个模态框,接着再到body底部写点击事件的方法,用到了关键代码modal和show来打开模态框.
最后是效果图:点击上面的按钮就弹出了刚才写的模态框,在打开的时候默认是有淡出淡入的效果的,如果不需要只要把.fade去掉就可以了.中间的内容部分如果特别的长的话,模态框就会出现一个滚动条可以滚动查看内容,如果不需要滚动的功能只需调用$('#myModal').modal('handleUpdate')
它就会自动调整模态框的位置不会再出现滚动条.
二.
大模态框和小模态框的演示
代码部分:
<button type="button"class="btn btn-primary" data-toggle="modal"datatarget=""onclick="openBigModal()">大模态框</button>
<div class="modal fade"id="modBIG" tabindex="-1" role="dialog"aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialogmodal-lg" role="document">
<divclass="modal-content">
<divclass="modal-header">
<h5class="modal-title" id="exampleModalLabel">大模态框头部</h5>
<buttontype="button" class="close" data-dismiss="modal"aria-label="Close">
<spanaria-hidden="true">×</span>
</button>
</div>
<divclass="modal-body">
// 内容部分
</div>
<divclass="modal-footer">
<buttontype="button" class="btn btn-secondary"data-dismiss="modal">关闭</button>
<buttontype="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
<!-- 小模态框 -->
<button type="button"class="btn btn-primary" data-toggle="modal"data-target=""onclick="openSmallModal()">小模态框</button>
<div class="modal fade"id="modSmall" tabindex="-1" role="dialog" arialabelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialogmodal-sm" role="document">
<divclass="modal-content">
<divclass="modal-header">
<h5class="modal-title" id="exampleModalLabel">小模态框头部</h5>
<buttontype="button" class="close" data-dismiss="modal"aria-label="Close">
<spanaria-hidden="true">×</span>
</button>
</div>
<divclass="modal-body">
内容部分
</div>
<divclass="modal-footer">
<buttontype="button" class="btn btn-secondary"data-dismiss="modal">关闭</button>
<buttontype="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
这里一样是给了两个button的点击事件,下面是点击事件的方法
最后出来的效果图:
这些就是模态框的常用使用方法.