189 8069 5689

bootstrapmodal是什么意思

bootstrap modal是什么意思，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

创新互联建站网站建设由有经验的网站设计师、开发人员和项目经理组成的专业建站团队，负责网站视觉设计、用户体验优化、交互设计和前端开发等方面的工作，以确保网站外观精美、成都网站制作、成都网站建设易于使用并且具有良好的响应性。

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

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

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

Bootstrap弹出模态框样式

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

关闭模态框：

  • 点击右上角的x

    bootstrap modal是什么意思

  • 点击右下角的关闭按钮

    bootstrap modal是什么意思

  • 点击遮罩层

运行原理

  • 弹出模态框是用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.
关闭 保存
普通的模态框

bootstrap modal是什么意思

有滚动条的模态框

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


	
		
			
				标题
				
					×
				
			
			
				
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.

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


			
			
				关闭
				保存
			
		
	


	
		
			有滚动条的模态框

bootstrap modal是什么意思

垂直居中的模态框

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



		
		
			
				标题
				
					×
				
			
			
					垂直居中的模态框
			
			
				关闭
				保存
			
		
	


	
		
			垂直居中的模态框

bootstrap modal是什么意思

包含栅格系统的模态框

在.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个
					
				
			
			
				关闭
				保存
			
		
	


	
		
			包含栅格系统的模态框

bootstrap modal是什么意思

模态框的尺寸

在.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属性
			
			
				关闭
				保存
			
		
	


	
		
			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 modal是什么意思

关于bootstrap modal是什么意思问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联行业资讯频道了解更多相关知识。


分享文章：bootstrapmodal是什么意思
路径分享：http://jkwzsj.com/article/gpdpgj.html

其他资讯