基于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> <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> </head> <body>  <div class="pro_list"> <div class="menu"> <input name="button" src="https://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="https://www.jb51.net/jscss/demoimg/201108/pro_l_menu2.jpg" type="image" id="message_show2" class="mess_show"> </dt> </div> <div class="menu"> <input name="button" src="https://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="https://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="https://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="https://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="https://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="https://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="https://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" 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 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 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 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 class="bb"><span style="color:#FF0000">*&nbsp;</span>请填写电子邮箱</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">内容</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('现在就想加入，请给我预留名额。')" href="javascript:;"><font color=#f05151>现在就想加入，请给我预留名额。</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('我想加入，请来电话告诉具体细节')" 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=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需再刷新一下页面才能执行]

您可能感兴趣的文章:

弹出隐藏层

基于jQuery实现下拉收缩(展开与折叠)特效
jQuery下拉收缩特效，点击下边那个按钮，就可实现下拉的效果，也叫展开与折叠的效果，使用了jQuery插件，如何不习惯使用jquery插件的朋友当然使用纯Js也能实现哦，但是jquery现在这么流行，值得学习一下哦
2012-12-12
据说是Google首页的网页模块拖动代码
据说是Google首页的网页模块拖动代码，Google很早就应用了网页拖动特效，不知大家发现没？本款拖动特效可以说是完全模仿了Google的拖动代码，比较有代表性，因此也很有参考价值，奉献给大家，仅供参考。
2010-09-09
js 页面左右两侧居中广告代码
js 页面左右两侧居中广告代码,里面的代码还不错
2012-03-03
js点击弹出div层实现可拖曳的弹窗效果
点击文字，弹出一个窗口，其实是一个弹出层，这个弹出层可以随鼠标拖曳，很炫的哦，另外，示例演示了用本方法弹出文字层和弹出图片层的具体代码，请根据选择使用哦，感兴趣的朋友可以研究下
2012-12-12
代码非常简洁且兼容多浏览器的拖动层实现代码
代码非常简洁且兼容多浏览器的拖动层的实现代码，需要的朋友可以参考下。
2011-01-01
支持IE,firefxo,chrome浏览器下鼠标拖动和拖拽的鼠标指针特效
这篇文章主要分享一个鼠标拖动的层的实例，支持谷歌浏览器，firefox，ie等浏览器，需要的朋友可以测试下
2015-02-02
js 左右悬浮对联广告特效代码
一段js 左右悬浮广告特效代码，js制作web网页左右悬浮广告特效，左右悬浮广告通常也称为对联广告，需要的朋友参考下
2014-12-12
javascript实现的在当前窗口中漂浮框的代码
javascript实现的在当前窗口中漂浮框的代码，代码中有注释，需要学习的朋友可以参考下。
2010-03-03
js QQ客服悬浮效果实现代码
一段js实现的QQ客服悬浮特效代码，经常用在网页上显示QQ客服在线信息，很实用的一段代码
2014-12-12
Tips 带三角可关闭的文字提示
多功能Tips，带小三角的文字提示，可关闭，有两套颜色方案可选择，可按你的要求将显示框定义显示在四个方向，放大或缩小浏览器窗口，不会有丝毫偏差。
2010-10-10

基于jQuery的弹出隐藏层的窗口特效

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具