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>
