data-参数说明(模态弹出窗的使用)

沃梦达教程前端开发

2022-11-02 135

除了通过data-toggle和data-target来控制模态弹出窗之外，Bootstrap框架针对模态弹出框还提供了其他自定义data-属性，来控制模态弹出窗。比如说:是否有灰色背景modal-backdrop，是否可以按ESC键关闭模态弹出窗。有关于Modal弹出窗自定义属性相关说明如下

除了通过data-toggle和data-target来控制模态弹出窗之外，Bootstrap框架针对模态弹出框还提供了其他自定义data-属性，来控制模态弹出窗。比如说:是否有灰色背景modal-backdrop，是否可以按ESC键关闭模态弹出窗。有关于Modal弹出窗自定义属性相关说明如下所示：

JavaScript触发时的参数设置：

$(function(){
$(".btn").click(function(){
$("#mymodal").modal({
backdrop:false,
keyboard:false});
});
});

参数设置：
在Bootstrap框架中还为模态弹出窗提供了三种参数设置，具体说明如下：

事件设置：
模态弹出窗还支持四种类型的事件，分别是模态弹出窗的弹出前、弹出后，关闭前、关闭后，具体描述如下：

$(function(){
$(".btn").click(function(){
$("#mymodal").modal("toggle");
});
$('#mymodal').on('show.bs.modal', function (e) {
alert("在show方法调用时立即触发（尚未显示之前）；如果单击了一个元素，那么该元素将作为事件的relatedTarget属性");
});
$('#mymodal').on('shown.bs.modal', function (e) {
alert("该事件在模态弹出窗完全显示给用户之后（并且等CSS动画完成之后）触发；如果单击了一个元素，那么该元素将作为事件的relatedTarget事件");
});
$('#mymodal').on('hide.bs.modal', function (e) {
alert("在hide方法调用时（但还未关闭隐藏）立即触发");
});
$('#mymodal').on('hidden.bs.modal', function (e) {
alert("该事件在模态弹出窗完全隐藏之后（并且CSS动画漂完成之后）触发");
});
});