模拟弹出菜单的代码- Javascript - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 模拟弹出菜单的代码

Javascript: Jquery实战_读书笔记2 选择器; JQuery 确定css方框模型（盒模型Box Model）; jQuery 入门级学习笔记及源码; 被jQuery折腾得半死，揭秘为何jQuery为何在IE/Firefox下均无法使用; JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探; JQuery 构建客户/服务分离的链接模型中Table中的排序分析; JQuery.uploadify 上传文件插件的使用详解 for ASP.NET; JavaScript 学习笔记（十四）正则表达式; JQuery 操作Javascript对象和数组的工具函数小结; 用JS写的一个TableView控件代码; JQuery 1.4 中的Ajax问题; window.onbeforeunload方法在IE下无法正常工作的解决办法; 优化javascript的执行速度; jQuery 1.4 15个你应该知道的新特性(译); js 模拟实现类似c#下的hashtable的简单功能代码; setTimeout与setInterval在不同浏览器下的差异; php gethostbyname获取域名ip地址函数详解; JavaScript 未结束的字符串常量常见解决方法; document.getElementById为空或不是对象的解决方法; javascript中利用数组实现的循环队列代码

No. « ‹ 280 281 282 283 › »

技术文章搜索

关键字

Javascript 中的模拟弹出菜单的代码

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 107 ::

收藏到网摘: n/a

发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载收藏Javascript中常用的55个经典技巧

点“为自己付费”按钮之后弹出一个模态化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">
</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"><img src="images/lockform_close.gif" title="关闭" /> </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"><img src="images/lockform_close.gif" title="关闭" /> </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 全选提示:你可先修改部分代码,再按运行]

发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载收藏Javascript中常用的55个经典技巧

Javascript 中的 模拟弹出菜单的代码

评论 (0) All

Javascript 中的模拟弹出菜单的代码