加入收藏 | 设为首页 | 会员中心 | 我要投稿 核心网 (https://www.hxwgxz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 编程 > 正文

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

发布时间:2020-03-20 18:11:51 所属栏目:编程 来源:站长网
导读:副标题#e# Web页面中使用遮罩层,可防止重复操作,提示loading;也可以模拟弹出模态窗口。 实现思路:一个DIV作为遮罩层,一个DIV显示loading动态GIF图片。在下面的示例代码中,同时展示了如何在iframe子页面中调用显示和隐藏遮罩层。 示例代码: index.htm

    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() {   

    // 遮罩层宽高分别为页面内容的宽高   

(编辑:核心网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读