CSS样式部分:

----------------------------------

<style type="text/css">
#loading-mask{
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
        z-index:20000;
        background-color:gray;
    }
    #loading{
        position:absolute;
        left:45%;
        top:40%;
        padding:2px;
        z-index:20001;
        height:auto;
 }
    #loading .loading-indicator{
        background:white;
        color:#444;
        font:bold 20px tahoma,arial,helvetica;
        padding:10px;
        margin:0;
        height:auto;
    }
    #loading-msg {
        font: normal 18px arial,tahoma,sans-serif;
    }
</style>

HTML部分:

-------------------------------------------------

<div id='loading-mask'></div>
<div id="loading">
    <div class="loading-indicator">
       <img src="large-loading.gif" width="32" height="32" style="margin-right:8px;float:left;vertical-align:top;"/>
       <br/><span id="loading-msg">Loading ...</span>
    </div>
</div>

div+css 遮罩层的更多相关文章

  1. div+css遮罩层

    曾被问到这个问题,不知所措,后来在网上找到了.大神文章:http://www.cnblogs.com/aspx-net/archive/2011/03/11/1981071.html 我想实现的效果没 ...

  2. CSS遮罩层的实现

    偶然发现自己原来写了一个CSS遮罩层,虽然这个东西没什么技术含量,但如果本人离开公司后又遇见此类问题,那么可能又得花些时间来找资料了.所以决定还是把它记下来吧. 直接上代码吧. 第一步,html代码: ...

  3. 利用div实现遮罩层效果

    利用div实现遮罩层效果就是利用一个全屏.半透明的div遮住页面上其它元素,典型的例子就是百度的登录界面.下面贴出示例代码: <!DOCTYPE html> <html> &l ...

  4. CSS 遮罩层、滑出页面

    <style> .panel_bak { position:fixed; bottom:0; display:none; width:100%; margin:0px; padding:5 ...

  5. CSS遮罩层简易写法

      现在很多站点弹出框,都需要一个遮罩层.写法很多,以下是我比较喜欢的一种: .box{ position:absolute; top:0; bottom:0; left:0; right:0; ba ...

  6. 前端页面给指定的div添加遮罩层,并且带有加载中的小旋转图片

    话不多说,先上代码,其实还是比较简单的 $("<div id='shade' style='opacity:0.85;background:white'></div> ...

  7. css遮罩层

    父元素:position:fixed; 让子元素居中对齐:position:absolute;top:0;bottom:0;left:0;right:0;margin:auto; <style& ...

  8. CSS遮罩层,全兼容

    <script type="text/javascript"> $(function(){ $('#divLocker').css({ "position&q ...

  9. 子div作为遮罩层

    效果图: 子div的代码:

随机推荐

  1. [Js]表格排序

    思路:遍历每个li,并把它们存放到数组中去,然后通过sort()方法进行排序,再插入 <body>    <input type="button" value=& ...

  2. iframe子页面与父页面通信

    同域下父子页面的通信 父页面: <!DOCTYPE html> <html> <head lang="en"> <meta charset ...

  3. js正则表达式和replace

    javascript中replace与正则表达式 replace()最简单的算是能力就是简单的字符替换.示例代码如下: <script language="javascript&quo ...

  4. js用正则表达式控制价格输入

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  5. iOS 高效添加圆角效果实战讲解

    圆角(RounderCorner)是一种很常见的视图效果,相比于直角,它更加柔和优美,易于接受.但很多人并不清楚如何设置圆角的正确方式和原理.设置圆角会带来一定的性能损耗,如何提高性能是另一个需要重点 ...

  6. What am I missing out in life if I don't have a girlfriend?

    http://www.quora.com/What-am-I-missing-out-in-life-if-I-dont-have-a-girlfriend/answer/Kelly-Erickson ...

  7. IntelliJ IDEA 12.0

    User name:JavaDeveloper Serial number:92547-KY2BB-QZ0S1-PEZCV-HUT8Q-6RYY4

  8. C语言学习笔记之成员数组和指针

    成员数组和指针是我们c语言中一个非常重要的知识点,记得以前在大学时老师一直要我们做这类的练习了,但是最的还是忘记了,今天来恶补一下.     单看这文章的标题,你可能会觉得好像没什么意思.你先别下这个 ...

  9. 2016 - 1- 22 NSURLConnetction --- POST请求

    一:与上一篇博客中的GET方法类似  只不过需要多注意,如果要改变请求的类型,需要生成NSMutableURLRequest对象才可以设置请求的类型. NSURL *url = [NSURL URLW ...

  10. OkHttp+Stetho+Chrome调试android网络部分

    如果要达到上面的效果,你需要改造你的网络请求模块,使用Chrome浏览器和android程序之间的中间件来连接,这就是本篇要介绍的主题:OkHttp+Stetho+Chrome进行网络调试. okht ...