弹出层，遮罩层，浮层菜单

最新推荐文章于 2021-10-11 20:26:31 发布

csmzl

最新推荐文章于 2021-10-11 20:26:31 发布

阅读量1.8k

点赞数

分类专栏： JS和JQuery 文章标签：浮层菜单 Jquery 遮罩层

本文链接：https://blog.csdn.net/csmzl/article/details/52956051

版权

JS和JQuery 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

现在随便打开个网页都能见到浮层菜单，不会弄都说不过去了！

直接上代码，一切尽在代码中。

<html>
<head>
    <meta charset="utf-8"></meta>
    <script type="text/javascript" src="jquery-1.12.1.js"></script>
    <style type="text/css">
        #globalDiv{
            display: none; 
            position: fixed; 
            clear: both; 
            z-index: 1013; 
            left: 0px; 
            top: 0px; 
            border: 0px solid rgb(255, 255, 255); 
            width: 1903px; 
            height: 950px; 
            background: rgba(43, 39, 39, 0.29); 
            opacity: 0.5;
        }
        #openDiv{
            display:block;
            margin:200px auto 0 auto;
            width: 200px;
            height: 50px;
            color: white;
            background-color: green;
            border: none;
            font-size: 30px;
        }
        #x{
            background: none repeat scroll 0 0 green;
            border-radius: 80%;
            width: 40px;
            height: 40px;
            color: white;
            position: absolute;
            cursor: pointer;
            top: 3px;left: 226px;
        }
        #contentDiv{
            display:none;
            z-index: 1018;
            height:300px;
            width:270px;
            position: absolute;
            margin:-52px 0 0 818px;
            background-color:rgb(107, 134, 206);
        }
        .btn{
            cursor: pointer;
            width: 200px;
            height: 50px;
            color: white;
            background-color: green;
            border: none;
            font-size: 30px;
        }
    </style>
</head>
<body>


<input id="openDiv" type="button" value="弹出浮层" onclick="showDiv()" style=""/>

<div id="contentDiv" style="">
    <div id="x" onclick="closeDiv()" style="">
        <a id="closeX" style="margin-left: 12px;margin-top: 2px;display: block;font-size: 30px;">X</a>
    </div>
    <div id="content" style="position: absolute;left: 34px;top: 55px;">
        <input type="button" value="菜单1" class="btn" style=""/><br>
        <input type="button" value="菜单2" class="btn" style="margin-top: 20px;"/>
    </div>
</div>
<div id="globalDiv" style=""></div>

<script type="text/javascript">
    function showDiv(){
        $("#globalDiv").css({"display":"block","height":	$(window).height(),"width":$(window).width()});
        $("#contentDiv").css("display","block");
    });
        $("#contentDiv").css("display","block");
    }
    function closeDiv(){
        $("#globalDiv").css("display","none");
        $("#contentDiv").css("display","none");
    }
</script>
</body>
</html>