点击链接弹出一个DIV层窗口 |
您所在的位置：网站首页 › html点击链接出现弹窗怎么办 › 点击链接弹出一个DIV层窗口 |
点击链接弹出一个DIV层窗口
|
做设备介绍页面的时候，发现每个设备点击查看详情都需要链接一个新的页面，这样比较影响网页浏览的效率和舒适度，所以想用弹窗的形式在当前页面展示详情。弹出的窗口要固定在浏览器窗口的中间位置，我采用了fixed固定布局。 某商品 详情页 .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。 请点这里同理，要在窗口中增加一个关闭窗口（隐藏）的链接。这样就能控制窗口的打开和关闭了，如果页面中有很多的商品，查看详情时就可以在当前页面显示一个窗口，而不需要另外在进入一个新的页面。 javascript:void(0) javascript:void(0) 中最关键的是 void 关键字， void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值。下面的代码创建了一个超级链接，当用户点击以后不会发生任何事。 单击此处什么也不会发生 getElementById()返回指定 ID 的元素 display: block和display: noneblock属性是显示，none则是隐藏 |
【本文地址】