現在隨便打開個網頁都能見到浮層菜單，不會弄都說不過去了！
直接上代碼，一切盡在代碼中。
<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>
