繁体中文
设为首页
加入收藏
资讯中心
网络编程
数据库
脚本专栏
实用技巧
软件编程
网页制作
操作系统
经典网摘
网站技巧
免费资源
关于我们
文章搜索
主机租用
域名查询
基础知识
应用技巧
表单特效
广告代码
网页特效
黑客性质
页面导航：
首页
→
网络编程
→
JavaScript
→
应用技巧
→ 正文内容
模拟弹出菜单的代码
发布：dxy 字体：[
增加
减小
] 类型：转载
点“为自己付费”按钮之后弹出一个模态化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 全选 提示:你可先修改部分代码,再按运行]
Tags：
模拟弹出菜单的代码
百度中搜索更多的关于
模拟弹出菜单的代码
内容，或者
用Google搜索相关更多
浏览次数：
载入中...
打印本文
关闭本文
返回首页
0
顶一下
上一篇文章：
随机显示经典句子或诗歌的javascript脚本
下一篇文章：
li隔行换色改进版
文章评论
共有
位脚本之家网友发表了评论
我来说两句
同 类 文 章
javascript 也来玩玩图片预加载
JS控件autocomplete 0.11演示及下载 1月5
动态生成的IFRAME，设置SRC时的，不同位置
设置和读取cookie的javascript代码
自适应高度框架 ----属个人收藏内容
让innerHTML的脚本也可以运行起来
使用JS+XML（数据岛）实现分页）
srcElement表格样式
用javascript实现li 列表数据隔行变换背景
javascript之鼠标拖动位置互换效果代码
最 近 更 新
使用IE的地址栏来辅助调试Web页脚本
用javascript实现兼容IE7的类库 IE7_0_9.
支持IE和firefox的js代码美化加亮源码
用js实现CSS圆角生成更新
用于table内容排序
真见识了-全代码编写的图片
解决远程页面抓取中的乱码问题？
（兼容ff/ie）td点击背景变色特效
用javascript来实现动画导航效果的代码
JS值当前DIV的ID值的代码
热 点 排 行
Div+CSS+JS树型菜单，可刷新
在线游戏大家来找茬II
eval(function(p,a,c,k,e,d)系列
javascript小技巧 超强推荐
动态加载js文件 document.create
Unicode 编码转换器
彻底搞懂JS无缝滚动代码
JavaScript实现Sleep函数的代码
支持IE和FF的div＋css选项卡
由浅到深了解JavaScript类
文章评论
共有 位脚本之家网友发表了评论我来说两句