div模态显示内容
业务需要,上传的图片,本地显示大图;
模态代码:
<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" }); }
//效果图: