JavaScript快速入門-實戰（例子）

標籤：分享圖片   知識點   osi   else   tst   思路分析   content   彈出對話方塊   sha   

1、類比bootstrap中的模態框

：（點我後，彈出對話方塊，最下面的內容可以看到，但是有一定的透明度。）

思路分析：

整體分為三層，最底層（點我），中間透明層（實現透明效果），最頂層（最新內容展示）

很明顯，三個div就可以實現，正常情況上面2層div隱藏起來，通過點擊“點我”後，上面2層div浮現出來，這樣就實現了動畫效果。

代碼如下：

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>小白教程</title></head><body><!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>body{　　 margin:0;}        .back{            background-color:yellow;            height: 2000px;        }        .shade{            position: fixed;            top: 0;            bottom: 0;            left:0;            right: 0;            background-color: blue;            opacity: 0.2;        }        .hide{            display: none;        }        .models{            position: fixed;            top: 50%;            left: 50%;            margin-left: -100px;            margin-top: -100px;            height: 200px;            width: 200px;            background-color: red;        }#ID1{margin-left:500px;margin-top:200px;}#ID2{float:right;}    </style></head><body><div class="back">    <input id="ID1" type="button" value="點我" onclick="action(‘show‘)"></div><div class="shade hide"></div><div class="models hide">    <input id="ID2" type="button" value="取消" onclick="action(‘hide‘)"></div><script>    function action(act){//擷取遮罩層節點、最外層節點        var shadeNode=document.getElementsByClassName("shade")[0];        var topNode=document.getElementsByClassName("models")[0];//點我後，如果參數為show，則遮罩層和最外層展示出來；如果參數為hide，則遮罩層和最外層隱藏起來。        if(act=="show"){              shadeNode.classList.remove("hide");              topNode.classList.remove("hide");        }else {              shadeNode.classList.add("hide");              topNode.classList.add("hide");        }    }</script></body></html></body></html>

　　

知識點分析：

1、body設定margin為0.保證html頁面置頂。

2、遮罩層和最外層的position為fixed；

3、遮罩層鋪滿螢幕，top、right、bottom、left都設為0；

4、最外層位置置中，這個重點說一下：

一般情況下，我們設定最外層div的距離top為50%，left為50%。

但是，這個和我們預想的有些差距，因為div本身有高度和寬度，所以看上去不是置中的位置，這時候我們需要把div整體向上、向左移動50%（height和width）。

            top: 50%;            left: 50%;            margin-left: -100px;            margin-top: -100px;            height: 200px;            width: 200px;                

　　

 

JavaScript快速入門-實戰（例子）