做设备介绍页面的时候，发现每个设备点击查看详情都需要链接一个新的页面，这样比较影响网页浏览的效率和舒适度，所以想用弹窗的形式在当前页面展示详情。弹出的窗口要固定在浏览器窗口的中间位置，我采用了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则是隐藏