半透明弹出层的CSS写法

最新推荐文章于 2021-06-10 12:44:48 发布

淡如轻风

最新推荐文章于 2021-06-10 12:44:48 发布

阅读量938

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/wenlyli/article/details/10000715

css 专栏收录该内容

61 篇文章

订阅专栏

CSS Code

1
/*
 UI Object */

2
html,
 body{height:100%;margin:0}

3
.mw{position:fixed;_position:absolute;top:0;left:0;width:100%;height:100%}

4
.mw
 .bg{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;opacity:.5;filter:alpha(opacity=50)}

5
.mw
 .fg{position:absolute;top:50%;left:50%;width:360px;height:160px;margin:-100px 0 0 -200px;padding:20px;border:3px solid#ccc;background:#fff}

6
/*
 //UI Object */

HTML Code

1
<!--
 UI Object -->

2
<div id="mw_temp" class="mw">

3
    <div class="bg"><!--
 Don't put here any content --></div>

4
    <div class="fg">

5
        <p>Modal
 Windowed Layer Example. Put this layer before end of the body. <button type="button"onclick="document.getElementById('mw_temp').style.display='none'">Close</button></p>

6
    </div>

7
</div>

8
<!--
 //UI Object -->