点击按钮后背景变灰+阻止事件

最近做了几个点击按钮出现弹出框后，背景变灰且内容不可操作，上网一查有个遮罩层的东东，感觉很神奇。原理是设置一个隐藏的、无内容的div，当点击按钮后显示这个div并通过绝对定位中的fixed遮住内容，以此达到遮住的效果。以下是我写的一个简单的demo，重点是那个蒙板的css属性。

	

		点我弹出框		
	
	

	

		
这是一个弹出框
		确 定
	
	

补充：

后来又做了个手机的背景蒙板，发现虽然能实现但内容还是可以滑动和点击，上网一查有一个移动端页面touch会穿透的常见bug，解决办法如下：

$(".modal-backdrop").on("touchmove", function(event){
	//阻止手机滑动事件冒泡和默认事件
        event.stopPropagation();
        event.preventDefault();
});

这句话的意思是， 阻止滑动的默认事件，多查了一些，遂，延伸一下：

1、阻止事件冒泡,使成为捕获型事件触发机制.

1 2 3 4 5 6 7 8 9

function  stopBubble(e) { //如果提供了事件对象，则这是一个非IE浏览器 if  ( e && e.stopPropagation )      //因此它支持W3C的stopPropagation()方法      e.stopPropagation(); else      //否则，我们需要使用IE的方式来取消事件冒泡      window.event.cancelBubble =  true ; }

 

2、当按键后,不希望按键继续传递给如HTML文本框对象时,可以取消返回值.即停止默认事件默认行为.

1 2 3 4 5 6 7 8 9 10

//阻止浏览器的默认行为 function  stopDefault( e ) {      //阻止默认浏览器动作(W3C)      if  ( e && e.preventDefault )          e.preventDefault();      //IE中阻止函数器默认动作的方式      else          window.event.returnValue =  false ;      return  false ; }