Web页面中使用遮罩层，可防止重复操作，提示loading；也可以模拟弹出模态窗口。

实现思路：一个DIV作为遮罩层，一个DIV显示loading动态GIF图片。在下面的示例代码中，同时展示了如何在iframe子页面中调用显示和隐藏遮罩层。

完整示例代码打包下载

示例代码：

index.html

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Commpatible" content="IE=edge">

<title>HTML遮罩层</title>

<link rel="stylesheet" href="css/index.css">

</head>

<body>

    <div class="header" id="header">

        <div class="title-outer">

            <span class="title">

                HTML遮罩层使用

            </span>

        </div>

    </div>

    <div class="body" id="body">

        <iframe id="iframeRight" name="iframeRight" width="100%" height="100%"

            scrolling="no" frameborder="0"

            style="border: 0px;margin: 0px; padding: 0px; width: 100%; height: 100%;overflow: hidden;"

            onload="rightIFrameLoad(this)" src="body.html"></iframe>

    </div>

    <!-- 遮罩层DIV -->

    <div id="overlay" class="overlay"></div>

    <!-- Loading提示 DIV -->

    <div id="loadingTip" class="loading-tip">

        <img src="data:images/loading.gif" />

    </div>

    <!-- 模拟模态窗口DIV -->

    <div class="modal" id="modalDiv"></div>

    <script type='text/javascript' src="js/jquery-1.10.2.js"></script>

    <script type="text/javascript" src="js/index.js"></script>

</body>

</html>

css/index.css

* {

    margin:;

    padding:;

}

html, body {

    width: 100%;

    height: 100%;

    font-size: 14px;

}

div.header {

    width: 100%;

    height: 100px;

    border-bottom: 1px dashed blue;

}

div.title-outer {

    position: relative;

    top: 50%;

    height: 30px;

}

span.title {

    text-align: left;

    position: relative;

    left: 3%;

    top: -50%;

    font-size: 22px;

}

div.body {

    width: 100%;

}

.overlay {

    position: absolute;

    top: 0px;

    left: 0px;

    z-index:;

    display:none;

    filter:alpha(opacity=60);

    background-color: #777;

    opacity: 0.5;

    -moz-opacity: 0.5;

}

.loading-tip {

    z-index:;

    position: fixed;

    display:none;

}

.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:;

    border-radius: 6px;

}

js/index.js

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

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

    $('.overlay').css({'height':$(document).height(),'width':$(document).width()});

    $('.overlay').show();

}

/**

 * 显示Loading提示

 */

function showLoading() {

    // 先显示遮罩层

    showOverlay();

    // Loading提示窗口居中

    $("#loadingTip").css('top',

            (getWindowInnerHeight() - $("#loadingTip").height()) / 2 + 'px');

    $("#loadingTip").css('left',

            (getWindowInnerWidth() - $("#loadingTip").width()) / 2 + 'px');

    $("#loadingTip").show();

    $(document).scroll(function() {

        return false;

    });

}

/**

 * 隐藏Loading提示

 */

function hideLoading() {

    $('.overlay').hide();

    $("#loadingTip").hide();

    $(document).scroll(function() {

        return true;

    });

}

/**

 * 模拟弹出模态窗口DIV

 * @param innerHtml 模态窗口HTML内容

 */

function showModal(innerHtml) {

    // 取得显示模拟模态窗口用DIV

    var dialog = $('#modalDiv');

    // 设置内容

    dialog.html(innerHtml);

    // 模态窗口DIV窗口居中

    dialog.css({

        'top' : (getWindowInnerHeight() - dialog.height()) / 2 + 'px',

        'left' : (getWindowInnerWidth() - dialog.width()) / 2 + 'px'

    });

    // 窗口DIV圆角

    dialog.find('.modal-container').css('border-radius','6px');

    // 模态窗口关闭按钮事件

    dialog.find('.btn-close').click(function(){

        closeModal();

    });

    // 显示遮罩层

    showOverlay();

    // 显示遮罩层

    dialog.show();

}

/**

 * 模拟关闭模态窗口DIV

 */

function closeModal() {

    $('.overlay').hide();

    $('#modalDiv').hide();

    $('#modalDiv').html('');

}

body.html

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Commpatible" content="IE=edge">

<title>body 页面</title>

<style type="text/css">

* {

    margin: 0;

    padding: 0;

}

html, body {

    width: 100%;

    height: 100%;

}

.outer {

    width: 200px;

    height: 120px;

    position: relative;

    top: 50%;

    left: 50%;

}

.inner {

    width: 200px;

    height: 120px;

    position: relative;

    top: -50%;

    left: -50%;

}

.button {

    width: 200px;

    height: 40px;

    position: relative;

}

.button#btnShowLoading {

    top: 0;

}

.button#btnShowModal {

    top: 30%;

}

</style>

<script type="text/javascript">

    function showOverlay() {

        // 调用父窗口显示遮罩层和Loading提示

        window.top.window.showLoading();

        // 使用定时器模拟关闭Loading提示

        setTimeout(function() {

            window.top.window.hideLoading();

        }, 3000);

    }

    function showModal() {

        // 调用父窗口方法模拟弹出模态窗口

        window.top.showModal($('#modalContent').html());

    }

</script>

</head>

<body>

    <div class='outer'>

        <div class='inner'>

            <button id='btnShowLoading' class='button' onclick='showOverlay();'>点击弹出遮罩层</button>

            <button id='btnShowModal' class='button' onclick='showModal();'>点击弹出模态窗口</button>

        </div>

    </div>

    <!-- 模态窗口内容DIV，将本页面DIV内容设置到父窗口DIV上并模态显示 -->

    <div id='modalContent' style='display: none;'>

        <div class='modal-container' style='width: 100%;height: 100%;background-color: white;'>

            <div style='width: 100%;height: 49px;position: relative;left: 50%;top: 50%;'>

                <span style='font-size: 36px; width: 100%; text-align:center; display: inline-block; position:inherit; left: -50%;top: -50%;'>模态窗口1</span>

            </div>

            <button class='btn-close' style='width: 100px; height: 30px; position: absolute; right: 30px; bottom: 20px;'>关闭</button>

        </div>

    </div>

    <script type='text/javascript' src="js/jquery-1.10.2.js"></script>

</body>

</html>

images/loading.gif

下载

完整示例代码打包下载

运行结果

初始化

显示遮罩层和Loading提示

显示遮罩层和模拟弹出模态窗口

END

在HTML中实现和使用遮罩层的更多相关文章

  1. htnl中的遮罩层以及定位方式

    在页面显示遮罩层,例如:一个div的css样式: $msk.css({ "top":"0", "left":"0", & ...

  2. web页在微信中访问增加遮罩层 右上角弹出在浏览器中打开

    https://blog.csdn.net/zgsdzczh/article/details/79744838 web页在微信中访问增加遮罩层 右上角弹出在浏览器中打开   <style typ ...

  3. AngualrJS中每次$http请求时的一个遮罩层Directive

    在AngualrJS中使用$http每次向远程API发送请求,等待响应,这中间有些许的等待过程.如何优雅地处理这个等待过程呢? 如果我们在等待过程中弹出一个遮罩层,会是一个比较优雅的做法. 这就涉及到 ...

  4. 遮罩层中的相对定位与绝对定位(Ajax)

    前提:公司最近做的一个项目列表,然后点击项目,出现背景遮罩层,弹出的数据框需要异步加载数据数据,让这个数据框居中,搞了两天终于总算达到Boss满意的程度,做了半年C/S,反过来做B/S,顿时感到技术还 ...

  5. easyui中使用的遮罩层

    easyui 的 dialog 是继承自 window的,而 window中有modal这样的属性(见参考资料),就是用于打开模态的窗口的,也就是你说的有遮罩层的窗口.所以不需要额外的代码,仅需在di ...

  6. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  7. Css动画形式弹出遮罩层，内容区上下左右居中于不定宽高的容器中

    <!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...

  8. 用JavaScript实现CheckBox的全选取消反选，及遮罩层中添加内容

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. html中设置透明遮罩层的兼容性代码

    说明:下面遮罩层的height视实际情况自行修改,要求显示的div层的样式需加上position:relative,位于遮罩层层div的下面一行.<div id="ceng" ...

随机推荐

  1. [移动] Xamarin install

    It was not possible to complete an automatic installation. This might be due to a problem with your ...

  2. Android 模糊效果 FastBlur

    import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.Paint; impor ...

  3. Unity3D笔记 英保通二

    一.访问另一个物体 1.代码中定义一个public的物体 例如:var target:Transform; 在面板上直接拖拽一个物体赋值给target 2.通过GameObject.Find(&quo ...

  4. zookeeper 安装的三种模式

    Zookeeper安装 zookeeper的安装分为三种模式:单机模式.集群模式和伪集群模式. 单机模式 首先,从Apache官网下载一个Zookeeper稳定版本,本次教程采用的是zookeeper ...

  5. thinkphp5部署在宝塔面板问题！

    遇到一个问题,就是当thinkphp5部署在宝塔面板上,会出现这个问题: 参考解决办法: http://www.thinkphp.cn/topic/56589.html 首先:thinkphp5的目录 ...

  6. 记H5单页遇到的几个ios兼容问题

    最近写一个H5活动页,安卓里的表现很不错,写下来很少出现兼容性问题,ios就不一样了,好多问题都出现在ios上(手动狗头)

  7. JavaScript 包管理工具npm 和yarn 对比

  8. 伸展树（Splay Tree）进阶 - 从原理到实现

    目录 1 简介 2 基础操作 2.1 旋转 2.2 伸展操作 3 常规操作 3.1 插入操作 3.2 删除操作 3.3 查找操作 3.4 查找某数的排名.查找某排名的数 3.4.1 查找某数的排名 3 ...

  9. upower xdisplay--nvidia -vga---cpu info

    grep 'physical id' /proc/cpuinfo | sort -u | wc -l grep 'core id' /proc/cpuinfo | sort -u | wc -l gr ...

  10. 应该掌握的JQuery的7个效果

    一: 语法: $(selector).hide(speed,callback); $(selector).show(speed,callback); 实例 //点击隐藏 $("#hide&q ...