除了通过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动画漂完成之后)触发");
});
});
编程基础网
本文标题为:data-参数说明(模态弹出窗的使用)
基础教程推荐
猜你喜欢
- AJAX实现数据的增删改查操作详解【java后台】 2023-02-23
- JavaScript开发简单易懂的Svelte实现原理详解 2023-08-12
- 使用HTML5中postMessage知识点解决Ajax中POST跨域问题 2022-10-17
- Ajax实现简单下拉选项效果【推荐】 2022-12-28
- vue在install时node-sass@4.14.1 postinstall:node scripts/build.js错误解决 2023-07-09
- ajax异步加载图片实例分析 2022-12-18
- 【vue】三种获取input值的写法 2023-10-08
- Ajax实现关键字联想和自动补全功能及遇到坑 2023-02-23
- html网页中使用希腊字母的方法 2022-09-21
- JavaScript函数this指向问题详解 2023-08-12
