做設備介紹頁面的時候，發現每個設備點擊查看詳情都需要鏈接一個新的頁面，這樣比較影響網頁瀏覽的效率和舒適度，所以想用彈窗的形式在當前頁面展示詳情。彈出的窗口要固定在瀏覽器窗口的中間位置，我采用了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和display: none這兩個語句，先把窗口的初始display設置成none。
<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則是隱藏