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

2022-11-01前端开发
219

除了通过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动画漂完成之后)触发");
});
});
 
The End
弹窗

相关推荐

百度地图调用点聚合和弹窗事件
什么是点聚合 点聚合 (MarkerClusterer 标记聚合器)用来解决加载大量点要素到地图上产生覆盖现象的问题,并提高性能。显示效果如下图: 简单实例 HTML \ CSS style body, html {width: 100%;height: 100%;margin: 0;font-family: "微软雅黑";} #allmap {wi...
2025-01-09 前端开发
179

layui中添加上下文提示弹窗功能
html部分代码: p context-tip="自定义上下文提示信息"段落内容.../pdiv context-tip="自定义上下文提示信息"div内容.../div js代码部分: // 悬浮提示$("body").on("mouseenter", "*[context-tip]", function () { var content = $(this).attr('context-tip'...
2024-08-13 前端开发
114

layui实现弹窗下拉搜索选择框功能
layui实现弹窗下拉搜索选择框功能,实现效果如下: html按钮: a class="btn ygyouhui2 btn-xs audit_btn" href="javascript:void(0);" title="通过" data-id="{$row['id']}" 通过/a js代码部分: script // 事件监听 $('.audit_btn').click(function (){ con...
2024-07-12 前端开发
104

原生js实现弹窗消息动画
下面是“原生js实现弹窗消息动画”的完整攻略:...
2023-12-09 前端开发
126

layui父页面获取layer.open弹窗中的值
layui父页面怎么获取layer.open弹窗中的值 ,下面小编为您解答: 1、获取input中的值:【content页面】 div style="padding: 0 10px;margin-top:10px"input type="text" id="refuseReason" name="refuseReason" placeholder="请输入拒绝理由" class="layui-in...
2023-12-05 前端开发
1033