<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>蒙层
</title>
<style>
*{
margin:0;
padding: 0;
}
#mark{
width: 100%;
height: 1000px;
background: rgba(0,0,0,.5);
overflow: hidden;
}
#inner{
width: 300px;
height: 400px;
background: #fff;
margin:100px auto;
}
</style>
</head>
<body>
<div id="mark">
<div id="inner"></div>
</div>
<script>
var mark = document.getElementById('mark');
var inner = document.getElementById('inner');
mark.onclick = function(){
mark.style.display = 'none';
}
inner.onclick = function(e){
var e = e || window.event;
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
}
</script>
</body>
</html>
转载请注明原文地址: https://www.6miu.com/read-81727.html
