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

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

时间: 2024-10-08 10:04:37

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

bootstrap-data-target触发模态弹出窗元素的data使用

1.运行效果如图所示 2.实现代码如下 <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <title>data-target触发模态弹出窗元素</title>     <

Bootstarp学习(二十四)模态弹出框--模态弹出窗的使用

除了通过data-toggle和data-target来控制模态弹出窗之外,Bootstrap框架针对模态弹出框还提供了其他自定义data-属性,来控制模态弹出窗.比如说:是否有灰色背景modal-backdrop,是否可以按ESC键关闭模态弹出窗.有关于Modal弹出窗自定义属性相关说明如下所示: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content=&qu

bootstrap-href触发模态弹出窗元素

1.运行效果如图所示 2.实现代码如下 <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <title>href触发模态弹出窗元素</title>     <!-- 最新版

bootstrap-data-target触发模态弹出窗元素

1.运行效果如图所示 2.实现代码如下 <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <title>data-target触发模态弹出窗元素</title>     <

Bootstrap模态弹出框

前面的话 在 Bootstrap 框架中把模态弹出框统一称为 Modal.这种弹出框效果在大多数 Web 网站的交互中都可见.比如点击一个按钮弹出一个框,弹出的框可能是一段文件描述,也可能带有按钮操作,也有可能弹出的是一张图片.本文将详细介绍Bootstrap模态弹出框 结构分析 Bootstrap框架中的模态弹出框,分别运用了“modal”.“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在“modal-content”中,其主要又包括三个部分: ? 

BootStrap学习笔记JS插件(一)--模态弹出框

一.弹出框基础 <div class="modal show"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss=&quo

模态弹出框

<div class="modal" id="mymodal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-di

Bootstarp学习(二十三)模态弹出框(Modals)

这一小节我们先来讲解一个"模态弹出框",插件的源文件:modal.js. 右侧代码编辑器(30行)就是单独引入 bootstrap 中发布出的"modal.js"文件. 样式代码: ? LESS版本:modals.less ? Sass版本:_modals.scss ? 编译后的Bootstrap:对应bootstrap.css文件第5375行-第5496行 在 Bootstrap 框架中把模态弹出框统一称为 Modal.这种弹出框效果在大多数 Web 网站的交互中

Bootstarp学习(二十五)模态弹出框--JavaScript触发时的参数设置

使用JavaScript触发模态弹出窗时,Bootstrap框架提供了一些设置,主要包括属性设置.参数设置和事件设置. 属性设置 模态弹出窗默认支持的自定义属性主要有: 比如你不想让用户按ESC键关闭模态弹出窗,你就可以这样做: $(function(){ $(".btn").click(function(){ $("#mymodal").modal({ keyboard:false }); }); }); 参数设置和事件设置进行介绍. 参数设置: 在Bootstr