首页 > 网络编程 > JavaScript > javascript技巧 > 模拟弹出菜单的代码 2007-08-06 20:41:09 作者： 模拟弹出菜单的代码 点“为自己付费”按钮之后弹出一个模态化div，点确定按钮之后，表格增加一行记录；同理，点“为他人付费”按钮也增加另外一行记录。可是在IE6、IE7下可以，FF下不行，请问可有办法呢？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>支付中心-填写资料</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> #testa,#testa2 { width:100%; } #lockform,#lockform2 { position:absolute; width:expression(this.parentNode.scrollWidth); top:expression(this.parentNode.scrollTop); left:0; height:100%; right:0; bottom:0; z-index:1; background:gray; filter:alpha(opacity=92); } #main,#main2 { width:400px; position:absolute; left:expression(this.parentNode.scrollWidth/2-200); top:100px; background:#efefef; text-align:left; filter:Alpha(opacity=100); } #InfoHead,#InfoHead2 { text-align:right; padding:3px 0 1px 3px; border:1px solid #f90; background:url(../images/lockform_title.gif) repeat-x; color:#36f; cursor:move; } #InfoHead a:link,#InfoHead a:visited,#InfoHead2 a:link,#InfoHead2 a:visited { font-size:14px; font-weight:bold; padding:0 3px; } #InfoBody,#InfoBody2 { border:4px double #f90; border-top:none; padding:2px; } #InfoContent { height:200px; padding:6px; overflow:auto; word-break:break-all; } #InfoContent2 { height:297px; padding:6px; overflow:auto; word-break:break-all; } </style> <script type="text/javascript"> <!-- var i=0; function add_oneself(){ tr=document.getElementById('pay_table').insertRow(); tr.insertCell().innerText="短信"+(++i); tr.insertCell().innerHTML='0.10 元/条'; tr.insertCell().innerHTML='<input class="input_bian width_50" type="text" name="verifiedCode">'; tr.insertCell().innerHTML='<span class="red">75</span> 元'; tr.insertCell().innerHTML=''; tr.insertCell().innerHTML='<a href="javascript:void(0)" onclick="del_item()">删除</a>' } function add_others(){ tr=document.all.pay_table.insertRow(); tr.insertCell().innerText="短信"+(++i); tr.insertCell().innerHTML='0.10 元/条'; tr.insertCell().innerHTML='<input class="input_bian width_50" type="text" name="verifiedCode">'; tr.insertCell().innerHTML='<span class="red">75</span> 元'; tr.insertCell().innerHTML='对方E-mail:<a href="javascript:void(null);" class="pay_link"><input class="input_width input_bian" name="email"><span>信息每行八个汉字 不超过两行高度。</span></a>'; tr.insertCell().innerHTML='<a href="javascript:void(0)" onclick="del_item()">删除</a>' } function del_item(){ document.all.pay_table.deleteRow(window.event.srcElement.parentElement.parentElement.rowIndex); } function lock(menu){ menu.style.display="none"?'':''; //打开蒙版 } function unlock(menu){ menu.style.display=""?'none':'none'; //去除蒙版,达到解锁 return false; } function showmain(){ document.all.main.style.display=''; lock(lockform); } function hidemain(){ document.all.main.style.display='none'; } function gs(d){ var t=document.getElementById(d); if (t){ return t.style; } else{ return null; } } function gs2(d,a){ if (d.currentStyle){ var curVal=d.currentStyle[a] } else{ var curVal=document.defaultView.getComputedStyle(d, null)[a] } return curVal; } function InfoClose(){ gs("main").display = "none"; } if (document.getElementById){ ( function(){ var n = 500; var dragok = false; var y,x,d,dy,dx; function move(e){ if (!e) e = window.event; if (dragok){ d.style.left = dx + e.clientX - x + "px"; d.style.top = dy + e.clientY - y + "px"; return false; } } function down(e){ if (!e) e = window.event; var temp = (typeof e.target != "undefined")?e.target:e.srcElement; if (temp.tagName != "HTML"|"BODY" && temp.className != "dragclass"){ temp = (typeof temp.parentNode != "undefined")? temp.parentNode:temp.parentElement; } if('TR'==temp.tagName){ temp = (typeof temp.parentNode != "undefined")? temp.parentNode:temp.parentElement; temp = (typeof temp.parentNode != "undefined")? temp.parentNode:temp.parentElement; temp = (typeof temp.parentNode != "undefined")? temp.parentNode:temp.parentElement; } if (temp.className == "dragclass"){ if (window.opera){ document.getElementById("Q").focus(); } dragok = true; temp.style.zIndex = n++; d = temp; dx = parseInt(gs2(temp,"left"))|0; dy = parseInt(gs2(temp,"top"))|0; x = e.clientX; y = e.clientY; document.onmousemove = move; return false; } } function up(){ dragok = false; document.onmousemove = null; } document.onmousedown = down; document.onmouseup = up; } )(); } function lock2(menu2){ menu2.style.display="none"?'':''; //打开蒙版 } function unlock2(menu2){ menu2.style.display=""?'none':'none'; //去除蒙版,达到解锁 return false; } function showmain2(){ document.all.main2.style.display=''; lock2(lockform2); } function hidemain2(){ document.all.main2.style.display='none'; } function gs2x(d){ var t=document.getElementById(d); if (t){ return t.style; } else{ return null; } } function gs22x(d,a){ if (d.currentStyle){ var curVal=d.currentStyle[a] } else{ var curVal=document.defaultView.getComputedStyle(d, null)[a] } return curVal; } function InfoClose2(){ gs2x("main2").display = "none"; } //--> </script> </head> <body> <div id="testa"> <form name="Form1"> <div id="pay_content_top2"></div> <div id="content"> <div class="align_center"> <table class="width_660"> <tr> <td class="activate_title"><img src="images/li.gif" alt="" /> 填写资料</td> </tr> <tr> <td class="height_28"> </td> </tr> </table> </div> <div class="align_center"> <img src="images/pay_banner.gif"> </div> <div class="height_28"></div> <div class="height_20 align_center"><strong>购 物 车</strong></div> <div class="align_center"> <table class="data_table" id="pay_table"> <tr class="data_table_tr1"> <td>商品名称</td> <td>单价（会员）</td> <td>数量</td> <td>总价</td> <td>付费类型</td> <td>删除</td> </tr> </table> <table class="data_table"> <tr> <td class="align_center">购物车里有商品：<span class="red">2</span> 件 总数：<span class="red">10</span> 件 共计：<span class="red">75</span> 元 您有预存款：<span class="red">120</span> 元 </td> </tr> </table> </div> <div class="verify_pay"> <input type="button" value="为自己付费" class="ncss" onclick="showmain();"> <input type="button" value="为他人付费" class="ncss" onclick="showmain2();"> <input type="button" value=" 清空购物车 " class="ncss" onclick="self.location='pay2.html'"> <input type="button" value=" 去收银台 " class="ncss2" onclick="self.location='pay3.html'"> </div> <div class="verify_email">您现在可以：<a href="#">返回主页</a> <a href="#">下载使用说明书</a> <a href="#">安全退出</a></div> </div> </form> </div> <div id="lockform" style="display:none;"> <div id="main" class="dragclass" style="display:none;"> <div id="InfoHead"><a href="#" onclick="InfoClose();unlock(lockform);"><img src="images/lockform_close.gif" title="关闭" /></a> </div> <div id="InfoBody"> <div id="InfoContent"> <table class="data_table4"> <tr> <td class="data_table4_tr2">年费套餐：</td> <td class="data_table4_tr1"><input type="text" class="input_width input_bian"></td> </tr> <tr> <td class="data_table4_tr2">数量：</td> <td class="data_table4_tr1"><input type="text" class="input_width input_bian"></td> </tr> </table> <table class="data_table4"> <tr> <td class="data_table4_tr3"></td> <td class="data_table4_tr1"><input type="button" value=" 确 定 " class="ncss" onclick="add_oneself();InfoClose();unlock(lockform);"> <input type="reset" value=" 取 消 " class="ncss" onclick="InfoClose();unlock(lockform);"> </td> </tr> </table> </div> </div> </div> </div> <div id="lockform2" style="display:none;"> <div id="main2" class="dragclass" style="display:none;"> <div id="InfoHead2"><a href="#" onclick="InfoClose2();unlock2(lockform2);"><img src="images/lockform_close.gif" title="关闭" /></a> </div> <div id="InfoBody2"> <div id="InfoContent2"> <table class="data_table4"> <tr> <td class="data_table4_tr2">EMAIL地址：</td> <td class="data_table4_tr1"><input type="text" class="input_width input_bian"> <input type="button" value="→检验用户" class="ncss2" style="width:78px;height:21px; padding:0;"></td> </tr> <tr> <td class="data_table4_tr2">年费套餐：</td> <td class="data_table4_tr1"><input type="text" class="input_width input_bian"></td> </tr> <tr> <td class="data_table4_tr2">数量：</td> <td class="data_table4_tr1"><input type="text" class="input_width input_bian"></td> </tr> <tr> <td class="data_table4_tr2">姓名：</td> <td class="data_table4_tr1">西门吹雪</td> </tr> <tr> <td class="data_table4_tr2">邮编：</td> <td class="data_table4_tr1">200083</td> </tr> <tr> <td class="data_table4_tr2">地址：</td> <td class="data_table4_tr1">某某省某某市某某路某某号</td> </tr> <tr> <td class="data_table4_tr2">邮箱：</td> <td class="data_table4_tr1">888@163.com</td> </tr> </table> <table class="data_table4"> <tr> <td class="data_table4_tr3"></td> <td class="data_table4_tr1"><input type="button" value=" 确 定 " class="ncss" onclick="add_others();InfoClose2();unlock2(lockform2);"> <input type="reset" value=" 取 消 " class="ncss" onclick="InfoClose2();unlock2(lockform2);"> </td> </tr> </table> </div> </div> </div> </div> </body> </html> [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 您可能感兴趣的文章:android popwindow实现左侧弹出菜单层及PopupWindow主要方法介绍js 弹出菜单/窗口效果jquery 插件之仿“卓越亚马逊”首页弹出菜单效果无js5款纯div+css制作的弹出菜单标准Js+DVML很酷漂亮实用的右键弹出菜单编写纯 CSS 弹出菜单的原理及实现 By shawl.qiu
