1 <!DOCTYPE html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>jQuery自定义区域的鼠标右键菜单</title> 5 <style type="text/css"> 6 #mask{position: absolute;left: 0;top: 0;z-index: 9000;display: block;} 7 #myMenu{position: absolute;display: none;z-index: 9999;background: yellow;border: 1px solid;width: 200px;height: 155px;} 8 #textbox{background: orange;width: 380px;border: 2px solid;} 9 img{height: 30px;width: 30px;} 10 td{font-size: 20px;cursor: pointer;} 11 a{text-decoration: none;color: black;} 12 a:hover{color: white;background: black;} 13 </style> 14 <script type="text/javascript" src="../js/jquery-3.1.1.js"></script> 15 <script type="text/javascript"> 16 var windowwidth; 17 var windowheight; 18 var checkmenu; 19 $(window).ready(function() { 20 $('#myMenu').hide(); 21 $('#textbox').on("contextmenu",function(e){ 22 windowwidth = $(window).width(); 23 windowheight = $(window).height(); 24 checkmenu = 1; 25 $('#mask').css({ 26 'height': windowheight, 27 'width': windowwidth 28 }); 29 $('#myMenu').show(500); 30 $('#myMenu').css({ 31 'top':e.pageY+'px', 32 'left':e.pageX+'px' 33 }); 34 return false; 35 }); 36 $('#mask').click(function(){ 37 $(this).height(0); 38 $(this).width(0); 39 $('#myMenu').hide(500); 40 checkmenu = 0; 41 return false; 42 }); 43 $('#mask').on("contextmenu",function(){ 44 $(this).height(0); 45 $(this).width(0); 46 $('#myMenu').hide(500); 47 checkmenu = 0; 48 return false; 49 }); 50 $(window).resize(function(){ 51 if(checkmenu == 1) { 52 windowwidth = $(window).width(); 53 windowheight = $(window).height(); 54 $('#mask').css({ 55 'height': windowheight, 56 'width': windowwidth, 57 }); 58 } 59 }); 60 }); 61 </script> 62 </head> 63 <body> 64 <div id="myMenu" > 65 <table cellspace="3"> 66 <tr> 67 <td ><img src="images/twitter.png" ></td><td><a href="#">tweet me</a></td> 68 </tr> 69 <tr> 70 <td ><img src="images/facebook.png" > </td><td><a href="#">facebook share</a></td> 71 </tr> 72 <tr> 73 <td ><img src="images/myspace.png" > </td><td><a href="#">myspace share</a></td> 74 </tr> 75 <tr> 76 <td ><img src="images/mail.png" > </td><td><a href="#">e-mail this</a></td> 77 </tr> 78 </table> 79 </div> 80 <div id="mask"> </div> 81 <div id="textbox"> 82 <p>嗨！您好，在这个区域内点击您的鼠标右键吧，会弹出一个自定义的右键菜单，和浏览器的右键菜单完全不一样哦！<p/> 83 </div> 84 </body> 85 </html>