懂视1
懂视101
懂视201
懂视301
懂视401
懂视501
懂视601
懂视701
懂视801
懂视901
懂视1001
懂视1101
懂视1201
懂视1301
懂视1401
懂视1501
懂视1601
懂视1701
懂视1801
懂视1901
文库1
文库101
文库201
文库301
文库401
文库501
文库601
文库701
文库801
文库901
文库1001
文库1101
文库1201
文库1301
文库1401
文库1501
文库1601
文库1701
文库1801
文库1901
33游戏网
全部频道
首页
科技
教育
生活
旅游
时尚
美容
美食
健康
体育
游戏
汽车
家电
您的当前位置：
首页
基于jQuery的弹出隐藏层的窗口特效_布局与层
基于jQuery的弹出隐藏层的窗口特效_布局与层
来源：33游戏网
运行效果后，点击菜单，会弹出一个注册表单，类似于很多论坛的用户注册及登录功能那样，目前还是挺流行的。
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>弹出层</title> </ script> $(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> </head> <body> <input name="button" src="http://www.gxlcms.com/jscss/demoimg/201108/pro_l_menu2.jpg" type="image" id="message_show" class="mess_show"> <input name="button" src="http://www.gxlcms.com/jscss/demoimg/201108/pro_l_menu2.jpg" type="image" id="message_show2" class="mess_show"> <input name="button" src="http://www.gxlcms.com/jscss/demoimg/201108/pro_l_menu2.jpg" type="image" id="message_show3" class="mess_show"> <input name="button" src="http://www.gxlcms.com/jscss/demoimg/201108/pro_l_menu2.jpg" type="image" id="message_show4" class="mess_show"> <input name="button" src="http://www.gxlcms.com/jscss/demoimg/201108/pro_l_menu2.jpg" type="image" id="message_show5" class="mess_show"> <input name="button" src="http://www.gxlcms.com/jscss/demoimg/201108/pro_l_menu2.jpg" type="image" id="message_show6" class="mess_show"> <input name="button" src="http://www.gxlcms.com/jscss/demoimg/201108/pro_l_menu2.jpg" type="image" id="message_show7" class="mess_show"> <input name="button" src="http://www.gxlcms.com/jscss/demoimg/201108/pro_l_menu2.jpg" type="image" id="message_show8" class="mess_show"> <input name="button" src="http://www.gxlcms.com/jscss/demoimg/201108/pro_l_menu2.jpg" type="image" id="message_show9" class="mess_show"> <table width="550" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="5" height=""></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">* 您的真实姓名</td> </tr> <tr> <td> </td> <td height="27">电话：</td> <td><input name="names" class="mess_input" /></td> <td colspan="2">* 请填写您的电话号码</td> </tr> <tr> <td> </td> <td height="27">地址：</td> <td><input name="names" class="mess_input" /></td> <td colspan="2">* 请填写您的地址,以保证资料邮递</td> </tr> <tr> <td> </td> <td height="27">邮箱：</td> <td><input name="names" class="mess_input" /></td> <td colspan="2">* 请填写电子邮箱</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"></textarea></td> <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0" > <tr> <td> <table border=0 cellspacing=0 cellpadding=0 width=180 height=1> <tbody> <tr> <td height=167 valign=top background=images/liuyan_08.png align=right style="padding-left:15px;"><table border=0 cellspacing=0 cellpadding=0 width=217> <tbody> <tr> <td height=30 valign=center width=210 align=left style="border-bottom:1px solid #f1aba7;"><font color=#c02d2c>填写留言或选择快捷留言</font></td> </tr> <tr> <td class=ly_td-bg height=26 width=210 align=left><font color=#f05151>现在就想加入，请给我预留名额。</font></td> </tr> <tr> <td class=ly_td-bg height=26 width=210 align=left><font color=#f05151>对这个项目很感兴趣，尽快寄资料</font></td> </tr> <tr> <td height=26 width=180 align=left><font color=#f05151>请问我这个地方有加入者了吗？ </font></td> </tr> </tbody> </table></td> </tr> </tbody> </table> <TABLE border=0 cellSpacing=0 cellPadding=0 width=230 height=1> <TBODY> <TR> <TD height=167 vAlign=top background=images/liuyan_08.png align=right style="padding-left:15px;"><TABLE border=0 cellSpacing=0 cellPadding=0 width=217> <TBODY> <TR> <TD height=30 vAlign=center width=210 align=left><FONT color=#c02d2c>填写留言或选择快捷留言</TD> </TR> <TR> <TD class=ly_td-bg height=26 width=210 align=left><FONT color=#f05151>我想加入，请来电话告诉具体细节</TD> </TR> <TR> <TD class=ly_td-bg height=26 width=210 align=left><FONT color=#f05151>想找一个合适的项目做，请来电话</TD> </TR> <TR> <TD height=26 width=180 align=left><FONT color=#f05151>有兴趣开店，请寄资料或打电话。</TD> </TR> </TBODY> </TABLE></TD> </TR> </TBODY> </TABLE> <TABLE border=0 cellSpacing=0 cellPadding=0 width=230 height=1> <TBODY> <TR> <TD height=167 vAlign=top background=images/liuyan_08.png align=right style="padding-left:15px;"><TABLE border=0 cellSpacing=0 cellPadding=0 width=217> <TBODY> <TR> <TD height=30 vAlign=center width=210 align=left><FONT color=#c02d2c>填写留言或选择快捷留言</TD> </TR> <TR> <TD class=ly_td-bg height=26 width=210 align=left><FONT color=#f05151>详细研究过您们的项目，想加入。</TD> </TR> <TR> <TD class=ly_td-bg height=26 width=210 align=left><FONT color=#f05151>加入你们后，还会提供哪些服务？</TD> </TR> <TR> <TD height=26 width=210 align=left><FONT color=#f05151>想去你们公司考察，请给我来电话</TD> </TR> </TBODY> </TABLE></TD> </TR> </TBODY> </TABLE> </td> </tr> </table></td> </tr> </table></td> </tr> <tr> <td> </td> <td> </td> <td align="right"><input src="images/mess_menu1.jpg" type="image"></td> <td width="161" height="50" align="center"><input name="button" src="images/mess_menu2.jpg" type="image" id="button_2"></td> <td width="118"> </td> </tr> </table> </body> </html>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
显示全文