lovecoding
/
Web1020


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* css reset */
        body{
            margin: 0;
        }
        li{
            list-style: none;
        }
        ul{
            margin: 0;
            padding: 0;
        }

        .box{
            /* width: 100vw;
            height: 100vh; */
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,0.5);
        }
        .menu{
            width: 200px;
            height: 400px;
            background-color: #fff;
            position: fixed;
            top:200px;
            left: 200px;
        }
        .menu li{
            padding:10px 20px;
            border-bottom: 1px solid #999;

        }
        .container{
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 黑色半透明背景蒙版 -->
        <div class="box"></div>
        <!-- 菜单栏 -->
        <div class="menu">
            <ul>
                <li>菜单一</li>
                <li>菜单二</li>
                <li>菜单三</li>
            </ul>
        </div>
    </div>
    <script>
        // 获取dom元素 整个文档
        var oDom = document.documentElement;
        // 蒙版和菜单区域
        var oContainer = document.getElementsByClassName("container")[0];
        // 蒙版
        var oBox = document.getElementsByClassName("box")[0];
        // 菜单
        var oMenu = document.getElementsByClassName("menu")[0];
        
        // 右键显示菜单
        oDom.oncontextmenu = function(e){
            // 记录点击位置
            var x = e.clientX;
            var y = e.clientY;
            // 设置菜单位置
            oMenu.style.left = x+"px";
            oMenu.style.top = y+"px";
            // 显示菜单及蒙版
            oContainer.style.display = "block";
            // 阻止默认事件
            e.preventDefault();
            // return false;
        }
        // 点击蒙版隐藏菜单
        oBox.onclick = function(){
            oContainer.style.display = "none";
        }
   </script>
</body>
</html>