bootstrap modal是什么意思

青灯夜游

发布时间：2021-11-05 15:22:15

3440人浏览过

来源于php中文网

原创

在bootstrap中，modal指的是“模态框”，是覆盖在父窗体上的子窗体；其目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。模态框可为网站添加醒目的提示和交互，用于通知用户、访客交互、消息警示或自定义的内容交互。

bootstrap modal是什么意思

本教程操作环境：Windows7系统、bootsrap3.3.7版、DELL G3电脑

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。

Bootstrap弹出模态框样式

使用Bootstrap的JavaScript模态框插件可以为您的网站添加醒目的提示和交互，用于通知用户、访客交互、消息警示或自定义的内容交互。

关闭模态框：

点击右上角的x
点击右下角的关闭按钮
点击遮罩层

运行原理

弹出模态框是用HTML、CSS和Javascript构建的，它们位于文档中其它表现元素之上，并从
中删除滚动事件，以便模态框自身的内容能得到滚动。
点击模态框的“backdrop”（灰背景区域），将自动关闭动态模块框。
Bootstrap一次只支持一个模态窗口，不支持嵌套模式，因为那样叠加会造成用户体验不佳。
模态框使用 position: fixed，在呈现上与其它元素相比有很大不同。请尽可能将弹出模态框的HTML放在顶级位置，以避免其它元素干扰，尤其是当另一个固定元素中也定义了 .modal 事件时，你可能会遇到问题。
同样是受position: fixed属性影响，在在移动设备上使用模态框，有一些注意事项。
根据HTML5的语义定义，autofocusHTML 属性对 Bootstrap 模态框没有影响，要达到同样的效果，需要使用一些JavaScript。

普通模态框

.modal：模态框的最外层容器。
.modal-dialog：模态框的容器。
.modal-content：放置模态框的内容，设置模态框样式。
.modal-header：模态框头部。
.modal-title：模态框标题。
.modal-body：模态框主体内容。
.modal-footer：模态框页脚内容。


	
		
			
				标题
				
			
			
				ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

有滚动条的模态框

当用户viewport 视口（弹出内容区）或设备的模态变得较长时，它们会自动滚动页面。

标题

ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

NetShopForge网上商店程序(VB)源码
NetShopForge是一款强劲的B2C的网上购物软件,利用她我们能建立起强劲的、自由的、安全的购物平台。 维博软件以有这样的软件无比自豪，系统基于ASP.NET 2.0及SqlServer开发，充分享受新技术带来的乐趣。 软件综合了卖家，买家，程序员，设计者的头脑风暴，目的就是用户能建立风格不同的电子商务系统，使它显得更加与众不同。 如果您寻求一款能按您的思想随意发挥的网上购物软件,那么Net

下载

ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

垂直居中的模态框

将.modal-dialog-centered添加到.modal-dialog对话框以垂直居中模式。



		
		
			
				标题
				
			
			
					垂直居中的模态框

包含栅格系统的模态框

在.modal-body中加入.container-fluid栅格系统，可以在动态视窗中使用Bootsrap栅格系统，并在任何地方使用正常的栅格系统class定义。



		
		
			
				标题
				
			
			
				
					
						第1列
						第2列
						第3列
						第4列
					
					
						第1列
						第2列
						第3列
						第4列
					
					
						第1列
						第2列
					
					
						超大屏6个，大屏4个，中等屏3个，小屏2个，超小屏1个
						超大屏6个，大屏4个，中等屏3个，小屏2个，超小屏1个
						超大屏6个，大屏4个，中等屏3个，小屏2个，超小屏1个
						超大屏6个，大屏4个，中等屏3个，小屏2个，超小屏1个
						超大屏6个，大屏4个，中等屏3个，小屏2个，超小屏1个
						超大屏6个，大屏4个，中等屏3个，小屏2个，超小屏1个

模态框的尺寸

在.modal-dialog中加入模态框尺寸。

class	描述	Modal max-width
.modal-xl	超大尺寸	1140px
.modal-lg	大尺寸	800px
none(默认)	默认尺寸	500px
.modal-sm	小尺寸	300px

使用数据属性

data属性，需要添加在button身上。

data-backdrop 是否显示遮罩层
data-keyboard 按esc是否关闭模态框
data-focus 让模态框获取到焦点
data-show 初始化时模态框是否显示



	
		
			
				标题
				
			
			
				data属性

JavaScript方法事件

方法：

.modal(options)：激活您的内容作为模态，将选项加入到object内。
.modal('toggle')：手动切换动态模态框，在动态模态框实际显示或隐藏之前返回给调用者（即在shown.bs.modal或hidden.bs.modal事件发生之前)。
.modal('show')：手动打开动态模态框，在动态模态框实际显示之前返回给调用者（即在shown.bs.modal事件发生前)。
.modal('hide')：手动隐藏动态模态框，在动态模态框实际隐藏之前返回给调用者（即在hidden.bs.modal事件发生前)。

事件：

show.bs.modal：

当调用show实例方法时，会立即触发该事件。如果是由点击引起的，被点击的元素是可用的，成为Event对象的relatedTarget属性。
shown.bs.modal：="normal" data-row-style="normal">

当模态框对用户来说可见时（需要等待CSS过渡完成），会触发该事件。如果是由点击引起的，被点击的元素是可用的，成为Event对象的relatedTarget属性。
hide.bs.modal：当调用hide实例方法时，会立即触发该事件。
hidden.bs.modal：

当模态框对用户来说终于完成隐藏时（需要等待CSS过渡完成），会触发该事件。







Bootstrap弹出模态框样式







标题



data属性

推荐学习：《bootstrap使用教程》

响应式布局框架有哪些

网页前端就是web前端吗

jquery弹窗关闭后刷新页面

jquery隐藏row

bootstrap javascript 关闭模态框

相关专题

js获取数组长度的方法

在js中，可以利用array对象的length属性来获取数组长度，该属性可设置或返回数组中元素的数目，只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值，也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容，供大家免费下载使用。

556

2023.06.20

js刷新当前页面

js刷新当前页面的方法：1、reload方法，该方法强迫浏览器刷新当前页面，语法为“location.reload([bForceGet]) ”；2、replace方法，该方法通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，不能通过“前进”和“后退”来访问已经被替换的URL，语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

374

2023.07.04

js四舍五入

js四舍五入的方法：1、tofixed方法，可把 Number 四舍五入为指定小数位数的数字；2、round() 方法，可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

734

2023.07.04

js删除节点的方法

js删除节点的方法有：1、removeChild()方法，用于从父节点中移除指定的子节点，它需要两个参数，第一个参数是要删除的子节点，第二个参数是父节点；2、parentNode.removeChild()方法，可以直接通过父节点调用来删除子节点；3、remove()方法，可以直接删除节点，而无需指定父节点；4、innerHTML属性，用于删除节点的内容。

477

2023.09.01

JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号，可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容，供大家免费下载体验。

434

2023.09.04

js生成随机数的方法

js生成随机数的方法有：1、使用random函数生成0-1之间的随机数；2、使用random函数和特定范围来生成随机整数；3、使用random函数和round函数生成0-99之间的随机整数；4、使用random函数和其他函数生成更复杂的随机数；5、使用random函数和其他函数生成范围内的随机小数；6、使用random函数和其他函数生成范围内的随机整数或小数。

1011

2023.09.04

如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍：1、内联脚本是将JavaScript代码直接嵌入到HTML标签中；2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中；3、外部脚本是将JavaScript代码放置在一个独立的文件；4、外部脚本是将JavaScript代码放置在一个独立的文件。

658

2023.09.12

Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型，用于表示独一无二的值。Symbol的特点：1、独一无二，每个Symbol值都是唯一的，不会与其他任何值相等；2、不可变性，Symbol值一旦创建，就不能修改或者重新赋值；3、隐藏性，Symbol值不会被隐式转换为其他类型；4、无法枚举，Symbol值作为对象的属性名时，默认是不可枚举的。

553

2023.09.20

Java JVM 原理与性能调优实战

本专题系统讲解 Java 虚拟机（JVM）的核心工作原理与性能调优方法，包括 JVM 内存结构、对象创建与回收流程、垃圾回收器（Serial、CMS、G1、ZGC）对比分析、常见内存泄漏与性能瓶颈排查，以及 JVM 参数调优与监控工具（jstat、jmap、jvisualvm）的实战使用。通过真实案例，帮助学习者掌握 Java 应用在生产环境中的性能分析与优化能力。

2026.01.20

热门下载

网站特效

网站源码

网站素材

前端模板