點選連結彈出一個DIV層視窗
阿新 • • 發佈：2018-12-11
做裝置介紹頁面的時候，發現每個裝置點選檢視詳情都需要連結一個新的頁面，這樣比較影響網頁瀏覽的效率和舒適度，所以想用彈窗的形式在當前頁面展示詳情。彈出的視窗要固定在瀏覽器視窗的中間位置，我採用了fixed固定佈局。
<!--HTML--> <body style="background-color: pink;"> <p>某商品</p> <div id="cont_b" class="cont"> <p>詳情頁</p> </div> </body>
.cont { display: block; position: fixed; top: 25%; left: 25%; width: 50%; height: 50%; padding: 20px; border: 10px solid #ddd; background-color: lightblue; color: white; z-index:1; overflow: auto; }
此時的頁面如下
但是現在的視窗是一直在頁面上的，我需要做一個點選連結，能夠控制視窗的顯示和隱藏，要用到display: block
<a href = "javascript:void(0)" onclick = "document.getElementById('cont_b').style.display='block'">請點這裡</a>
同理，要在視窗<div>中增加一個關閉視窗（隱藏）的連結。這樣就能控制視窗的開啟和關閉了，如果頁面中有很多的商品，檢視詳情時就可以在當前頁面顯示一個視窗，而不需要另外在進入一個新的頁面。
- javascript:void(0)
javascript:void(0) 中最關鍵的是 void 關鍵字， void 是 JavaScript 中非常重要的關鍵字，該操作符指定要計算一個表示式但是不返回值。下面的程式碼建立了一個超級連結，當用戶點選以後不會發生任何事。
<a href="javascript:void(0)">單擊此處什麼也不會發生</a> <!-- 和href="#"的區別是，#包含了一個位置資訊，預設的錨是#top，也就是網頁的上端。而javascript:void(0), 僅僅表示一個死連結。-->
- getElementById()
返回指定 ID 的元素
- display: block和display: none
block屬性是顯示，none則是隱藏