|
|
@@ -0,0 +1,70 @@
|
|
|
+<!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>
|
|
|
+ body,ul{
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ li{
|
|
|
+ list-style: none;
|
|
|
+ }
|
|
|
+ .bg-box{
|
|
|
+ background-color: rgba(0,0,0,.6);
|
|
|
+ position: fixed;
|
|
|
+ top:0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .menu-content{
|
|
|
+ width: 200px;
|
|
|
+ height: 300px;
|
|
|
+ background-color: #fff;
|
|
|
+ position: fixed;
|
|
|
+ top:0;
|
|
|
+ left: 0;
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .menu-content li{
|
|
|
+ padding: 10px 0;
|
|
|
+ text-align: center;
|
|
|
+ border-bottom: 1px solid black;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div class="bg-box"></div>
|
|
|
+ <div class="menu-content">
|
|
|
+ <ul>
|
|
|
+ <li>菜单一</li>
|
|
|
+ <li>菜单二</li>
|
|
|
+ <li>菜单三</li>
|
|
|
+ <li>菜单四</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <script>
|
|
|
+ var oHtml = document.documentElement;
|
|
|
+ var bgBox = document.getElementsByClassName("bg-box")[0];
|
|
|
+ var menuContent = document.getElementsByClassName("menu-content")[0];
|
|
|
+ oHtml.oncontextmenu = function(e){
|
|
|
+ console.log(e);
|
|
|
+ e.preventDefault();
|
|
|
+
|
|
|
+ bgBox.style.display = "block";
|
|
|
+ menuContent.style.display = "block";
|
|
|
+ menuContent.style.top = e.clientY+"px";
|
|
|
+ menuContent.style.left = e.clientX+"px";
|
|
|
+
|
|
|
+ }
|
|
|
+ bgBox.onclick = function(){
|
|
|
+ bgBox.style.display = "none";
|
|
|
+ menuContent.style.display = "none";
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
