css+js 弹窗的 原理与解析。

值得思考的一些问题 。
1，html div的写法。
外边大包裹，里边小包裹，里边各个块。
2，js 写法中。注意，DOM 的选择方法。及事件的绑定方法。
dom.onclick=function (){

}
3,积累写代码的经验。


<style type="text/css">
	/* 弹窗 (background) */
	.modal {
	    display: none; /* 默认隐藏 */
	    position: fixed; 
	    z-index: 1; 
	    padding-top: 100px; 
	    left: 0;
	    top: 0;
	    width: 100%; 
	    height: 100%; 
	    overflow: auto; 
	    background-color: rgb(0,0,0); 
	    background-color: rgba(0,0,0,0.4);
	}
	 
	/* 弹窗内容 */
	.modal-content {
	    position: relative;
	    background-color: #fefefe;
	    margin: auto;
	    padding: 0;
	    border: 1px solid #888;
	    width: 80%;
	    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
	    -webkit-animation-name: animatetop;
	    -webkit-animation-duration: 0.4s;
	    animation-name: animatetop;
	    animation-duration: 0.4s
	}
	 
	/* 添加动画 */
	@-webkit-keyframes animatetop {
	    from {top:-300px; opacity:0} 
	    to {top:0; opacity:1}
	}
	 
	@keyframes animatetop {
	    from {top:-300px; opacity:0}
	    to {top:0; opacity:1}
	}
	 
	/* 关闭按钮 */
	.close {
	    color: white;
	    float: right;
	    font-size: 28px;
	    font-weight: bold;
	}
	 
	.close:hover,
	.close:focus {
	    color: #000;
	    text-decoration: none;
	    cursor: pointer;
	}
	 
	.modal-header {
	    padding: 2px 16px;
	    background-color: #5cb85c;
	    color: white;
	}
	 
	.modal-body {padding: 2px 16px;}
	 
	.modal-footer {
	    padding: 2px 16px;
	    background-color: #5cb85c;
	    color: white;
	}
</style>



<!-- 打开弹窗按钮 -->
<button id="myBtn">打开弹窗</button>
 
<!-- 弹窗 -->
<div id="myModal" class="modal">
 
  <!-- 弹窗内容 -->
    <div class="modal-content">
      <div class="modal-header">
        <span class="close">&times;</span>
        <h2>弹窗头部</h2>
      </div>
      <div class="modal-body">
        <p>弹窗文本...</p>
        <p>弹窗文本...</p>
      </div>
      <div class="modal-footer">
        <h3>弹窗底部</h3>
      </div>
    </div>
 
</div>



<script>
	// 获取弹窗
	var modal = document.getElementById('myModal');
	
	// 打开弹窗的按钮对象
	var btn = document.getElementById("myBtn");
	
	// 获取 <span> 元素，用于关闭弹窗 that closes the modal
	var span = document.getElementsByClassName("close")[0];
	
	// 点击按钮打开弹窗
	btn.onclick = function() {
	    modal.style.display = "block";
	}
	
	// 点击 <span> (x), 关闭弹窗
	span.onclick = function() {
	    modal.style.display = "none";
	}
	
	// 在用户点击其他地方时，关闭弹窗
	window.onclick = function(event) {
	    if (event.target == modal) {
	        modal.style.display = "none";
	    }
	}
	

</script>