运行效果后，点击菜单，会弹出一个注册表单，类似于很多论坛的用户注册及登录功能那样，目前还是挺流行的。 <title>弹出层</title> <script src="http://demo.jb51.net/jslib/jquery/jquery-1.6.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#button_2").click(function(){ $("#message").hide(); }); $("#message_show").click(function(){ $("#message").show(); }); $("#message_show2").click(function(){ $("#message").show(); }); $("#message_show3").click(function(){ $("#message").show(); }); $("#message_show4").click(function(){ $("#message").show(); }); $("#message_show5").click(function(){ $("#message").show(); }); $("#message_show6").click(function(){ $("#message").show(); }); $("#message_show7").click(function(){ $("#message").show(); }); $("#message_show8").click(function(){ $("#message").show(); }); $("#message_show9").click(function(){ $("#message").show(); }); }); </script> <style type="text/css"> .pro_list { width:720px; margin:0 auto; } .menu { width:700px; height:30x; padding-top:15px; clear:both; } .message_box { width:550px; border:5px solid #bd0404; background:#fef8f6; position:absolute; margin:0 auto; left: 498px; top: 200px; display:none; } .message_box { width:550px; border:5px solid #bd0404; background:#fef8f6; position:absolute; margin:0 auto; left: 498px; top: 200px; display:none; } .message_box .mess_input { width:200px; border:1px solid #ccc; height:20px; caption-side:inherit; } .ly_td-bg { border-bottom:#f8d1cf dashed 1px; width:180px; padding-right:10px; } .dd { width:200px; height:161px; border:1px solid #ccc; } .bb span { color:#855409; font-size:14px; margin-left:10px; } .mess_show { float:right; margin-right:5px; } </style> <!--头部结束--> <div class="pro_list"> <div class="menu"> <input name="button" src="http://www.jb51.net/jscss/demoimg/201108/pro_l_menu2.jpg" type="image" id="message_show" class="mess_show"> </div> <div class="menu"> <input name="button" src="http://www.jb51.net/jscss/demoimg/201108/pro_l_menu2.jpg" type="image" id="message_show2" class="mess_show"> </div> <div class="menu"> <input name="button" src="http://www.jb51.net/jscss/demoimg/201108/pro_l_menu2.jpg" type="image" id="message_show3" class="mess_show"> </div> <div class="menu"> <input name="button" src="http://www.jb51.net/jscss/demoimg/201108/pro_l_menu2.jpg" type="image" id="message_show4" class="mess_show"> <div class="menu"> <input name="button" src="http://www.jb51.net/jscss/demoimg/201108/pro_l_menu2.jpg" type="image" id="message_show5" class="mess_show"> </div> <div class="menu"> <input name="button" src="http://www.jb51.net/jscss/demoimg/201108/pro_l_menu2.jpg" type="image" id="message_show6" class="mess_show"> </div> <div class="menu"> <input name="button" src="http://www.jb51.net/jscss/demoimg/201108/pro_l_menu2.jpg" type="image" id="message_show7" class="mess_show"> </div> <div class="menu"> <input name="button" src="http://www.jb51.net/jscss/demoimg/201108/pro_l_menu2.jpg" type="image" id="message_show8" class="mess_show"> </div> <div class="menu"> <input name="button" src="http://www.jb51.net/jscss/demoimg/201108/pro_l_menu2.jpg" type="image" id="message_show9" class="mess_show"> </div> </div> </div> <div class="div_clear"></div> <!--列表结束--> <div class="message_box" id="message"> <table width="550" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="5" height="89"><img src="images/message_1.jpg" style="max-width:90%" style="max-width:90%" alt="基于jQuery的弹出隐藏层的窗口特效_布局与层" ></td> </tr> <tr> <td width="12"> </td> <td width="37" height="27">姓名：</td> <td width="222"><input name="names" class="mess_input"></td> <td colspan="2"><span class="bb"><span style="color:#FF0000">* </span>您的真实姓名</span></td> </tr> <tr> <td> </td> <td height="27">电话：</td> <td><input name="names" class="mess_input"></td> <td colspan="2"><span class="bb"><span style="color:#FF0000">* </span>请填写您的电话号码</span></td> </tr> <tr> <td> </td> <td height="27">地址：</td> <td><input name="names" class="mess_input"></td> <td colspan="2"><span class="bb"><span style="color:#FF0000">* </span>请填写您的地址,以保证资料邮递</span></td> </tr> <tr> <td> </td> <td height="27">邮箱：</td> <td><input name="names" class="mess_input"></td> <td colspan="2"><span class="bb"><span style="color:#FF0000">* </span>请填写电子邮箱</span></td> </tr> <tr> <td> </td> <td colspan="4"><table width="98%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="37" valign="middle">内容</td> <td width="224"><textarea name="text_content" class="dd" id="text_content" onmouseover="menuControl()" cols="20" rows="10" style="overflow-y:hidden"> 填写留言或选择快捷留言 现在就想加入，请给我预留名额。 对这个项目很感兴趣，尽快寄资料 请问我这个地方有加入者了吗？ 填写留言或选择快捷留言 我想加入，请来电话告诉具体细节 想找一个合适的项目做，请来电话 有兴趣开店，请寄资料或打电话。 填写留言或选择快捷留言 详细研究过您们的项目，想加入。 加入你们后，还会提供哪些服务？ 想去你们公司考察，请给我来电话 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
