简单易用的Div弹出层

时间：2015-02-26 11:43:07 阅读：165 评论：0 收藏：0 [点我收藏+]

标签：

<html>
<head>
<title>showdiv</title>

<style type="text/css">
.black_overlay{
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: gray;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:0.5;/*透明度---取值[0.0,1.0]*/
    filter:alpha(opacity=0.9);
}
.white_content {
    display: none;
    position: fixed;
    top: 15%;
    left: 15%;
    width: 70%;
    height: 400px;
    padding: 1%;
    border: 1px solid lightblue;
    background-color: white;
    z-index:1002;
    min-height:400px;
}
.btn{
    cursor:pointer;
}
</style>

<script type="text/javascript">
    //弹出隐藏层
    function ShowDiv(show_div,bg_div){
        document.getElementById(show_div).style.display=‘block‘;
        document.getElementById(bg_div).style.display=‘block‘ ;
        var bgdiv = document.getElementById(bg_div);
        bgdiv.style.width = document.body.scrollWidth;
        $("#"+bg_div).height($(document).height());
        // bgdiv.style.height = $(document).height();
    }
    //关闭弹出层
    function CloseDiv(show_div,bg_div)
    {
        document.getElementById(show_div).style.display=‘none‘;
        document.getElementById(bg_div).style.display=‘none‘;
    };
</script>

<body>
    
    <a onclick="ShowDiv(‘mainProduct‘,‘fade‘)" class="btn">Open</a>

    
    <div id="fade" class="black_overlay">这是遮挡层</div>
    <div id="mainProduct" class="white_content">
        ------填内容-----部分--------可以是表单哦
        <div class="main" style="width:100%;height:350px;overflow-y:scroll;overflow-x:hidden;border:1px solid gray;">
                中间部分<br/>
        </div>
        <div class="bottom" style="text-align: right; margin-bottom:5px;">
            <a class="btn" onclick="javascript:saveMainPro();">Save</a>
            <a class="btn" onclick="CloseDiv(‘mainProduct‘,‘fade‘)">Cancel</a>
        </div>
    </div>
</body>
</html>

简单易用的Div弹出层

标签：

原文地址：http://blog.csdn.net/pa5201314/article/details/43951035

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行