码迷,mamicode.com
首页 > 其他好文 > 详细

遮罩层

时间:2014-10-02 15:40:03      阅读:224      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   io   os   ar   sp   div   问题   

遮罩层示例

                                                            这里是内容页面!

                                                            
 
下面是本例的代码:
<!DOCTYPE html>
<html>
<head>
    <title>遮罩层示例</title>
    <meta charset="utf-8" />
    <style type="text/css">

        .dialog-back{
            display: none;
            position:  absolute;
            top:0%;
            left:0%;
            width:100%;
            height:100%;
            -moz-opacity: 0.7;
            opacity:.70;
            filter: alpha(opacity=70);
            background-color:black;
            z-index: 1000;
        }

        .dialog-pop{
            display: none;
            position: absolute;
            top: 25%;
            left: 22%;
            width: 53%;
            height: 49%;
            padding: 8px;
            border: 8px solid #E8E9F7;
            background-color: black;
            z-index:1001;
            overflow: auto;
        }

    </style>
</head>
<body>
<div class="main">
    <p>这里是内容页面!</p>
    <input type="button" value="弹出遮罩层" onclick="document.getElementById(‘back‘).style.display=‘block‘;document.getElementById(‘test‘).style.display=‘block‘;" />
    <input type="button" value="遮罩下点击" onclick="alert(‘如果你看到我,说明你的遮罩层有问题哦!‘)" />

</div>
<!--遮罩层-->
<div class="dialog-back" id="back"></div>
<!--位于遮罩层上的弹窗层-->
<div class="dialog-pop" id="test">
    <input type="button" value="查看遮罩层" onclick="alert(‘这里是弹窗层‘);"/>
    <input type="button" value="隐藏遮罩层" onclick="document.getElementById(‘back‘).style.display=‘none‘;document.getElementById(‘test‘).style.display=‘none‘;" />
    <p>这里是弹窗层!</p>
</div>
</body>
</html>

 

 
 

这里是弹窗层!

遮罩层

标签:style   blog   color   io   os   ar   sp   div   问题   

原文地址:http://www.cnblogs.com/jameslong/p/4004021.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!