bootstrap点击遮罩不关闭弹出框

bootstrap默认状态下点击弹出框周围的遮罩会自动关闭弹出框,可以通过设置backdrop让点击遮罩时不关闭弹出框。

设置方法有两种:

1直接在弹出框的标签上添加 data-backdrop=“static”
2.使用jq对弹出框设置代码:
$("#myModal").modal({backdrop:‘static’});
bootstrap点击遮罩不关闭弹出框_第1张图片

详解:

效果图:
bootstrap点击遮罩不关闭弹出框_第2张图片1、点击打开遮罩层按钮
bootstrap点击遮罩不关闭弹出框_第3张图片
2、弹出一个隐藏的div
bootstrap点击遮罩不关闭弹出框_第4张图片
3、实现过程
(1)引入bootstrap.min.css、bootstrap.min.js文件
(2)实现代码:



	
	
		
		
		
	
		遮罩层DEM
	
		
		
	
		
		
 
	
	
	
		
	  
	
		

遮罩层DEMO

bootstrap点击遮罩不关闭弹出框_第5张图片
参考:http://www.ziqiangxuetang.com/bootstrap/bootstrap-modal-plugin.html

你可能感兴趣的:(前端)