如题,使用Javascript,实现点击图片可弹出大图,大图可关闭?
新手求问!
谢谢
2条回答 默认 最新
关注 你说的是lightBox效果吧 ? 给你段代码:
<!DOCTYPE html> <meta charset="utf-8"> <html> <head> <title>Lightbox效果</title> <style type="text/css"> .black_overlay{ display: none; position: absolute; top: 0%;left: 0%; width: 100%; height: 100%; background-color: black; z-index: 1001; opacity: .70; } .white_content{ display: none; position: absolute; top: 30%; left: 30%; width: 40%; height: 40%; padding: 16px; border: 16px solid orange; background-color: white; z-index: 1002; overflow: auto; } </style> </head> <body> <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block'; document.getElementById('fade').style.display='block'">请单击这里</a> <div id="light" class="white_content"> 这里是lightbox的弹出框的内容 <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none'; document.getElementById('fade').style.display='none'">关闭</a> </div> <div id="fade" class="black_overlay"></div> </body> </html>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥30 帮我写一段可以读取LD2450数据并计算距离的Arduino代码
- ¥15 C#调用python代码(python带有库)
- ¥15 矩阵加法的规则是两个矩阵中对应位置的数的绝对值进行加和
- ¥15 活动选择题。最多可以参加几个项目?
- ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
- ¥15 vs2019中数据导出问题
- ¥20 云服务Linux系统TCP-MSS值修改?
- ¥20 关于#单片机#的问题:项目:使用模拟iic与ov2640通讯环境:F407问题:读取的ID号总是0xff,自己调了调发现在读从机数据时,SDA线上并未有信号变化(语言-c语言)
- ¥20 怎么在stm32门禁成品上增加查询记录功能
- ¥15 Source insight编写代码后使用CCS5.2版本import之后,代码跳到注释行里面