码迷,mamicode.com
首页 > 其他好文 > 详细

div模态显示内容

时间:2018-01-04 14:25:11      阅读:126      评论:0      收藏:0      [点我收藏+]

标签:top   absolute   post   cti   flow   .com   inter   ima   图片   

业务需要,上传的图片,本地显示大图;

模态代码:

<div onclick="hidebigimg()" class = "bg-model" style="position:absolute;top:0%;left:0%;display:none;background:rgba(0,0,0,0.3);width:100%;height:100%;position:fixed;z-index:9999">
  <img class = ‘content‘ style="cursor:pointer;position: absolute;left: 50%;top: 50%;border-radius: 8px;margin-top:-300px;margin-left:-400px; width: 800px;height:600px;background-color: #fff;"/>
</div>

js:

//显示大图
function showbigimg(obj){
    if(!$(obj).attr("src")){
        return;
    }
    $(".content").attr("src",$(obj).attr("src"));
    $(".bg-model").fadeTo(300,1)
      //隐藏窗体的滚动条
  $("body").css({ "overflow": "hidden" });
}
//隐藏大图
function hidebigimg(){
    $(".content").removeAttr("src");
    $(".bg-model").fadeTo(300,1);
    $(".bg-model").hide();
    //显示窗体的滚动条
  $("body").css({ "overflow": "visible" });
}

//效果图:

技术分享图片

 

技术分享图片

 

div模态显示内容

标签:top   absolute   post   cti   flow   .com   inter   ima   图片   

原文地址:https://www.cnblogs.com/zrui-xyu/p/8192660.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!