RK_MG_YS 2017-04-26 08:52 采纳率: 50%
浏览 10221
已采纳

JS实现点击图片可弹出大图

如题,使用Javascript,实现点击图片可弹出大图,大图可关闭?
新手求问!
谢谢

  • 写回答

2条回答 默认 最新

  • Java知音_ 博客专家认证 2017-04-26 09:11
    关注

    你说的是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>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥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之后,代码跳到注释行里面