基于jQuery的彈出隱藏層的窗口特效

更新時間：2011年08月04日 18:53:04 作者：

jQuery彈出隱藏層的窗口特效，缺少了幾個小圖片，這個自己制作幾個補上去吧，這不是關鍵的東西。

運行效果后，點擊菜單，會彈出一個注冊表單，類似于很多論壇的用戶注冊及登錄功能那樣，目前還是挺流行的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>彈出層</title>   <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>  <div   id="wppm3vysvbp"   class="pro_list"> <div   id="wppm3vysvbp"   class="menu"> <input name="button" src="http://m.fzitv.net/jscss/demoimg/201108/pro_l_menu2.jpg" type="image" id="message_show" class="mess_show"> </div> <div   id="wppm3vysvbp"   class="menu"> <input name="button" src="http://m.fzitv.net/jscss/demoimg/201108/pro_l_menu2.jpg" type="image" id="message_show2" class="mess_show"> </dt> </div> <div   id="wppm3vysvbp"   class="menu"> <input name="button" src="http://m.fzitv.net/jscss/demoimg/201108/pro_l_menu2.jpg" type="image" id="message_show3" class="mess_show"> </div> <div   id="wppm3vysvbp"   class="menu"> <input name="button" src="http://m.fzitv.net/jscss/demoimg/201108/pro_l_menu2.jpg" type="image" id="message_show4" class="mess_show"> <div   id="wppm3vysvbp"   class="menu"> <input name="button" src="http://m.fzitv.net/jscss/demoimg/201108/pro_l_menu2.jpg" type="image" id="message_show5" class="mess_show"> </div> <div   id="wppm3vysvbp"   class="menu"> <input name="button" src="http://m.fzitv.net/jscss/demoimg/201108/pro_l_menu2.jpg" type="image" id="message_show6" class="mess_show"> </div> <div   id="wppm3vysvbp"   class="menu"> <input name="button" src="http://m.fzitv.net/jscss/demoimg/201108/pro_l_menu2.jpg" type="image" id="message_show7" class="mess_show"> </div> <div   id="wppm3vysvbp"   class="menu"> <input name="button" src="http://m.fzitv.net/jscss/demoimg/201108/pro_l_menu2.jpg" type="image" id="message_show8" class="mess_show"> </div> <div   id="wppm3vysvbp"   class="menu"> <input name="button" src="http://m.fzitv.net/jscss/demoimg/201108/pro_l_menu2.jpg" type="image" id="message_show9" class="mess_show"> </div> </div> </div> <div   id="wppm3vysvbp"   class="div_clear"></div>  <div   id="wppm3vysvbp"   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" width="550" height="89" /></td> </tr> <tr> <td width="12">&nbsp;</td> <td width="37" height="27">姓名：</td> <td width="222"><input name="names" class="mess_input" /></td> <td colspan="2"><span id="wppm3vysvbp"    class="bb"><span style="color:#FF0000">*&nbsp;</span>您的真實姓名</span></td> </tr> <tr> <td>&nbsp;</td> <td height="27">電話：</td> <td><input name="names" class="mess_input" /></td> <td colspan="2"><span id="wppm3vysvbp"    class="bb"><span style="color:#FF0000">*&nbsp;</span>請?zhí)顚懩碾娫捥柎a</span></td> </tr> <tr> <td>&nbsp;</td> <td height="27">地址：</td> <td><input name="names" class="mess_input" /></td> <td colspan="2"><span id="wppm3vysvbp"    class="bb"><span style="color:#FF0000">*&nbsp;</span>請?zhí)顚懩牡刂?以保證資料郵遞</span></td> </tr> <tr> <td>&nbsp;</td> <td height="27">郵箱：</td> <td><input name="names" class="mess_input" /></td> <td colspan="2"><span id="wppm3vysvbp"    class="bb"><span style="color:#FF0000">*&nbsp;</span>請?zhí)顚戨娮余]箱</span></td> </tr> <tr> <td>&nbsp;</td> <td colspan="4"><table width="98%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="37" valign="middle">內(nèi)容</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><div style="POSITION: relative;" id=menu_1> <table border=0 cellspacing=0 cellpadding=0 width=180 height=164> <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><strong>填寫留言或選擇快捷留言</strong></font></td> </tr> <tr> <td class=ly_td-bg height=26 width=210 align=left><a onclick="sel('現(xiàn)在就想加入，請給我預留名額。')" href="javascript:;"><font color=#f05151>現(xiàn)在就想加入，請給我預留名額。</font></a></td> </tr> <tr> <td class=ly_td-bg height=26 width=210 align=left><a onclick="sel('對這個項目很感興趣，盡快寄資料')" href="javascript:;"><font color=#f05151>對這個項目很感興趣，盡快寄資料</font></a></td> </tr> <tr> <td height=26 width=180 align=left><a onclick="sel('請問我這個地方有加入者了嗎？ ')" href="javascript:;"><font color=#f05151>請問我這個地方有加入者了嗎？ </font></a></td> </tr> </tbody> </table></td> </tr> </tbody> </table> </div> <DIV style="POSITION: relative; DISPLAY: none;" id=menu_2> <TABLE border=0 cellSpacing=0 cellPadding=0 width=230 height=164> <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><STRONG>填寫留言或選擇快捷留言</STRONG></TD> </TR> <TR> <TD class=ly_td-bg height=26 width=210 align=left><A onClick="sel('我想加入，請來電話告訴具體細節(jié)')" href="javascript:;"><FONT color=#f05151>我想加入，請來電話告訴具體細節(jié)</A></TD> </TR> <TR> <TD class=ly_td-bg height=26 width=210 align=left><A onclick="sel('想找一個合適的項目做，請來電話')" href="javascript:;"><FONT color=#f05151>想找一個合適的項目做，請來電話</A></TD> </TR> <TR> <TD height=26 width=180 align=left><A onclick="sel('有興趣開店，請寄資料或打電話。')" href="javascript:;"><FONT color=#f05151>有興趣開店，請寄資料或打電話。</A></TD> </TR> </TBODY> </TABLE></TD> </TR> </TBODY> </TABLE> </DIV>   <DIV style="POSITION: relative; DISPLAY: none; " id=menu_3> <TABLE border=0 cellSpacing=0 cellPadding=0 width=230 height=164> <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><STRONG>填寫留言或選擇快捷留言</STRONG></TD> </TR> <TR> <TD class=ly_td-bg height=26 width=210 align=left><A onclick="sel('詳細研究過您們的項目，想加入。')" href="javascript:;"><FONT color=#f05151>詳細研究過您們的項目，想加入。</A></TD> </TR> <TR> <TD class=ly_td-bg height=26 width=210 align=left><A onClick="sel('加入你們后，還會提供哪些服務？')" href="javascript:;"><FONT color=#f05151>加入你們后，還會提供哪些服務？</A></TD> </TR> <TR> <TD height=26 width=210 align=left><A onclick="sel('想去你們公司考察，請給我來電話')" href="javascript:;"><FONT color=#f05151>想去你們公司考察，請給我來電話</A></TD> </TR> </TBODY> </TABLE></TD> </TR> </TBODY> </TABLE> </DIV></td> </tr> </table></td> </tr> </table></td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</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">&nbsp;</td> </tr> </table> </div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章: