Position 应用

Pop 弹窗(弹出层)

Pop 弹窗(弹出层)原理:

popdemo.html:

						
<button id="popBtn">popOpen</button>
<div id="pop-container">
  <button id="closeBtn">popClose</button>
  <div>Pop Content</div>
</div>
<div id="mask"></div>

<script type="text/javascript">
  var pop = document.getElementById('pop-container');
  var mask = document.getElementById('mask');

  document.getElementById('popBtnn').onclick =  function popup() {
    popView.style.display = 'block';
    maskLayer.style.display = 'block';
  };
  document.getElementById('closeBtn').onclick = function close() {
    popView.style.display = 'none';
    maskLayer.style.display = 'none';
  };
</script>
						
					

popdemo.css:

						
#pop-container {
  display: none;
  border: 1px solid black;
  width: 50%;
  height: 50%;
  position: absolute;
  top: 20%;
  left: 25%;
  z-index: 2;
  background-color: white;
}

#mask {
  width: 100%;
  height: 100%;
  opacity: 0.5;
  filter: alpha(opacity=50);
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: silver;
}
						
					
Popview Content