1. 程式人生 > >div模態顯示內容

div模態顯示內容

png mar style model 代碼 rem ont urn nbsp

業務需要,上傳的圖片,本地顯示大圖;

模態代碼:

<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模態顯示內容