自定义网页右键弹出菜单
日期：2003-03-24 地址： 作者：
禁用网页右键弹出菜单的例子就见多了，其实我们还可以把右键菜单替换自定义的内容，某些时候这还是一个不错的操作方式。原理很简单，先看看核心代码： var oPopup = window.createPopup(); //创建弹出式菜单实例 var oPopBody = oPopup.document.body; //这两句设置菜单的内容 oPopBody.innerHTML = "菜单内容"; //可以合并为oPopup.document.body.innerHTML="菜单内容"; oPopup.show(event.x, event.y, 90, 41, document.body); //在需要的地方弹出菜单，90、41分别为菜单宽度和高度 应该很好理解吧。下面给一个实例，是我做的图片新闻的后台管理页面，左击图片修改内容，右击图片弹出操作菜单。<HTML><HEAD><TITLE>自定义弹出菜单</TITLE><META http-equiv=Content-Type content="text/html; charset=gb2312"><LINK href="../css/css.css" type=text/css rel=stylesheet><LINK href="../css/css2.css" type=text/css rel=stylesheet><style type="text/css"><!--body td{font-size:12px;}.prompt{height:22; font-size:12px;background-color:lightyellow;border:solid red 1px;position:absolute;left:0;top:0;padding:4px;display:none;filter: Alpha(Opacity=80);}--></style><script language="javascript">var oPopup = window.createPopup();function PopMenu(id){ var oPopBody = oPopup.document.body; oPopBody.style.backgroundColor = "buttonface"; oPopBody.style.border = "solid black 1px"; oPopBody.innerHTML = "" +"<table cellpadding=0 cellspacing=0 border=0 width=100% style='font-size:12px;'>" +"<tr><td valign=middle height=20 onmouseover="this.bgColor='highlight';this.style.color='highlighttext';" " +"onmouseout="this.bgColor='';this.style.color=''" onclick="parent.window.open('/news/view.asp?id="+id+"');"> 查看该新闻 </td></tr>" +"<tr><td bgcolor='threedshadow' height=1></td></tr>" +"<tr><td valign=middle height=20 onmouseover="this.bgColor='highlight';this.style.color='highlighttext';" " +"onmouseout="this.bgColor='';this.style.color=''" onclick="parent.document.frames['main'].location=" +"'newsimgdel.asp?id="+id+"'"> 删除 </td></tr><table>"; //+"<tr><td bgcolor='threedhighlight' height=1></td></tr>" HidePrompt(); oPopup.show(event.x, event.y, 90, 41, document.body); return false;}function ShowPrompt(){ pt.style.pixelLeft = event.x; pt.style.pixelTop = event.y; pt.style.display = "block";}function HidePrompt(){ pt.style.display = "none";}</script></HEAD><BODY leftMargin=0 topMargin=0 marginheight="0" marginwidth="0" style="text-align:center;"><div class="prompt" id="pt"> 左击修改资料，右击弹出操作菜单 </div><table height="100%" width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="333333"><tr><td width="200" align="left" valign="top" bgcolor="#F2F2F2"><table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%"><tr><td align="center">图片新闻</td></tr><tr><td></td></tr><tr height="100%"><td height="100%" align="center" valign="top"><DIV style="WIDTH:200;HEIGHT:100%;overflow:auto;"><br><a href='javascript:void(0);' onclick="" onmouseover='ShowPrompt();' onmouseout='HidePrompt();' oncontextmenu='PopMenu(1);return false;'><img src='news1.gif' border=0 width=150 height=110><br>新闻图片1<br></a><br><a href='javascript:void(0);' onclick="" onmouseover='ShowPrompt();' onmouseout='HidePrompt();' oncontextmenu='PopMenu(1);return false;'><img src='news1.gif' border=0 width=150 height=110><br>新闻图片2<br></a><br><a href='javascript:void(0);' onclick="" onmouseover='ShowPrompt();' onmouseout='HidePrompt();' oncontextmenu='PopMenu(1);return false;'><img src='news1.gif' border=0 width=150 height=110><br>新闻图片3<br></a><br><a href='javascript:void(0);' onclick="" onmouseover='ShowPrompt();' onmouseout='HidePrompt();' oncontextmenu='PopMenu(1);return false;'><img src='news1.gif' border=0 width=150 height=110><br>新闻图片4<br></a><br><a href='javascript:void(0);' onclick="" onmouseover='ShowPrompt();' onmouseout='HidePrompt();' oncontextmenu='PopMenu(1);return false;'><img src='news1.gif' border=0 width=150 height=110><br>新闻图片5<br></a><br><a href='javascript:void(0);' onclick="" onmouseover='ShowPrompt();' onmouseout='HidePrompt();' oncontextmenu='PopMenu(1);return false;'><img src='news1.gif' border=0 width=150 height=110><br>新闻图片6<br></a><br><br></div></td></tr></table></td><td bgcolor="#FFFFFF"><iframe name="main" frameborder=0 width=100% scrolling=auto height=100% src="newsimg.asp"></iframe></td></tr></table></body></html>
