模拟弹出菜单的代码_javascript技巧

来源：飒榕旅游知识分享网

点“为自己付费”按钮之后弹出一个模态化div，点确定按钮之后，表格增加一行记录；同理，点“为他人付费”按钮也增加另外一行记录。可是在IE6、IE7下可以，FF下不行，请问可有办法呢？

<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"> 
'; 
 tr.insertCell().innerHTML='75 元'; 
 tr.insertCell().innerHTML=''; 
 tr.insertCell().innerHTML='删除' 
 } 
 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='75 元'; 
 tr.insertCell().innerHTML='对方E-mail:<input class="input_width input_bian" name="email">信息每行八个汉字
不超过两行高度。'; 
 tr.insertCell().innerHTML='删除' 
 } 
 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> 
 
 
 
 
 
 <img src="https://www.gxlcms.com/Uploads//Uploads/images/lockform_close.gif" title="关闭" /> 
 
 
 <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> 
 
 
 
 
 
 
 <img src="https://www.gxlcms.com/Uploads//Uploads/images/lockform_close.gif" title="关闭" /> 
 
 
 <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> 
 
 
 
 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]