sinat_34322285
RK_MG_YS
采纳率100%
2017-04-26 08:52 阅读 9.8k

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

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

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

2条回答 默认 最新

  • 已采纳
    weixin_36380516 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>
    
    点赞 评论 复制链接分享
  • showbo GoCityPass新加坡曼谷通票 2017-04-26 09:33

    fancybox

    visuallightbox

    colorbox等等。。

    点赞 2 评论 复制链接分享

相关推荐