原生js控制控制--彈窗的顯示和隱藏

   以防浪費大家的時間，還是先上效果圖吧，滿足您的需求就往下look吧。

   重要知識點：點擊其他地方，也就是除了小叉子之外的地方也能夠關閉彈窗哦。代碼已標紅

    

 

   html代碼：

　　<button id="btn" onclick="openframe()">點擊彈出</button>
　　<div id="modal">
　　<div class="win">
　　<p>我是彈框中的內容</p>
　　<span class="close" onclick="closeframe()">×</span>
　　</div>
　　</div>

    css代碼：

　　*{
　　margin: 0;
　　padding: 0;
　　}

　　body{
　　width: 100%;
　　background-color: #ececec;
　　}
　　button{
　　background-color: transparent;
　　border: 1px solid dodgerblue;
　　background-color: #1E90FF;
　　color: #fff;
　　border-radius:2px;
　　margin: 20px 20px;
　　width: 5%;
　　cursor: pointer;
　　}
　　#modal{
　　width: 100%;
　　height: 100%;
　　position: fixed;
　　left: 0;
　　top: 0;
　　background-color: rgba(0,0,0,.4);
　　display: none;
　　z-index: 999;
　　}
　　#modal .win{
　　width: 80%;
　　height: 120px;
　　background-color: lightgoldenrodyellow;
　　margin: 300px auto;
　　position: relative;
　　}
　　.win span{
　　position: absolute;
　　right: 5px;
　　top:-8px;
　　font-size: 30px;
　　color: #333;
　　cursor: pointer;
　　}
　　.win p{
　　padding-top: 50px;
　　text-align: center;
　　}

　js代碼：

　　var btn=document.getElementById("btn");
　　var modal=document.getElementById("modal");
　　var close=document.getElementsByClassName("close");
　　//點擊按鈕，彈出彈框
　　function openframe(){
　　modal.style.display="block";
　　}
　　//點擊叉號，關閉彈窗
　　function closeframe(){
　　modal.style.display="none";
　　}
　　//點擊其他地方窗口隱藏
　　window.onclick=function(e){
　　if(e.target==modal){
　　modal.style.display="none";
　　}
　　}

 

 

      每篇隨筆必加內容：

      小白一枚，如有大神路過請手下留情，多多指教哦。