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

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条)

报告相同问题？

悬赏问题

  • ¥100 Jenkins自动化部署—悬赏100元
  • ¥15 关于#python#的问题：求帮写python代码
  • ¥20 MATLAB画图图形出现上下震荡的线条
  • ¥15 关于#windows#的问题：怎么用WIN 11系统的电脑 克隆WIN NT3.51-4.0系统的硬盘
  • ¥15 perl MISA分析p3_in脚本出错
  • ¥15 k8s部署jupyterlab，jupyterlab保存不了文件
  • ¥15 ubuntu虚拟机打包apk错误
  • ¥199 rust编程架构设计的方案 有偿
  • ¥15 回答4f系统的像差计算
  • ¥15 java如何提取出pdf里的文字？