HTML实现遮罩层的方法 HTML中如何使用遮罩层

2020-04-16 21:44:51易采站长站整理

}   
.loading-tip img {   
    width:100px;   
    height:100px;   
}   
  
.modal {   
    position:absolute;   
    width: 600px;   
    height: 360px;   
    border: 1px solid rgba(0, 0, 0, 0.2);   
    box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.5);   
    display: none;   
    z-index: 10003;   
    border-radius: 6px;   
}   
  

index.js

JavaScript Code复制内容到剪贴板

function rightIFrameLoad(iframe) {   
    var pHeight = getWindowInnerHeight() – $(‘#header’).height() – 5;   
       
    $(‘div.body’).height(pHeight);   
    console.log(pHeight);   
       
}   
  
// 浏览器兼容 取得浏览器可视区高度   
function getWindowInnerHeight() {   
    var winHeight = window.innerHeight   
            || (document.documentElement && document.documentElement.clientHeight)   
            || (document.body && document.body.clientHeight);   
    return winHeight;   
       
}   
  
// 浏览器兼容 取得浏览器可视区宽度   
function getWindowInnerWidth() {   
    var winWidth = window.innerWidth   
            || (document.documentElement && document.documentElement.clientWidth)   
            || (document.body && document.body.clientWidth);   
    return winWidth;   
       
}   
  
/**  
 * 显示遮罩层  
 */  
function showOverlay() {   
    // 遮罩层宽高分别为页面内容的宽高