bootstrapmodal是什么意思

有滚动条的模态框

当用户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.

			
			
				关闭
				保存
			
		
	


	
		
			有滚动条的模态框
		
	

垂直居中的模态框

将.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中加入模态框尺寸。

	
		
		
			
				标题
				
					×
				
			
			
				超大尺寸模态框
			
			
				关闭
				保存
			
		
	


	
		
		
			
				标题
				
					×
				
			
			
				大尺寸模态框
			
			
				关闭
				保存
			
		
	


	
		
		
			
				标题
				
					×
				
			
			
				小尺寸模态框
			
			
				关闭
				保存
			
		
	



	
		
			超大尺寸模态框
			大尺寸模态框
			小尺寸模态框
		
	

使用数据属性

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过渡完成），会触发该事件。

标题

×



data属性


关闭
保存







方法与事件

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