珠江路在线
首页
互联网思维
硬件中心
软件中心
游戏中心
源码之家
今日新鲜事
传奇
软件开发培训班
>>
编程开发
>> JavaScript
软件新闻
编程开发
创意设计
操作系统
软件下载
基于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="http://www.codefans.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.codefans.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="http://www.codefans.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.codefans.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.codefans.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.codefans.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.codefans.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.codefans.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.codefans.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"> </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"></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><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> </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><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> </DIV> <!--sel end--> <!--sel start--> <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><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> </DIV></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> </div> </body> </html>
技术文章快速查找
js jquery做的图片连续滚动代码
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能（含后台代码）
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
使用GruntJS构建Web程序之安装篇
JS 屏蔽键盘不可用与鼠标右键不可用的方法
JavaScript中的字符串操作
简单JavaScript日历及详细说明
jcarousellite.js 基于Jquery的图片无缝滚动插件
相关下载
在线教程导航
软件应用
·
Windows8
·
Windows7
·
Word
·
Excel
·
PPT
·
WPS
Web开发
·
ASP
·
JavaScript
·
DIV+CSS
·
JSP
·
VbScript
·
XML
·
PHP
开发语言
·
VB
·
VC
·
ASP.NET
·
Java
·
C++
·
Delphi
数据库开发
·
MySQL
·
MsSQL
·
Access
·
Oracle
·
DB2
手机系统
·
Android
·
iOS
·
WindowsPhone
网站设计
·
Flash
·
Dreamweaver
·
Fireworks
平面设计
·
Photoshop
·
CorelDraw
·
AutoCAD
·
3DsMAX
·
Illustrator
网络技术
·
网站运营
·
网络安全
·
网络搭建
工具：
成语大全
邮编区号
全国地图
南京二手车
免费电影
汉字换拼音
繁体字转换
二维码
| 站长工具：
收录/反向链接
ALEXA排名
关键词排名
WHOIS
教程：
PPT
Excel
Word
Dreamweaver
Photoshop
|
ASP
PHP
|
ASP.NET
Java
|
SQL
MySQL
热门论坛：
游戏
美食
传奇
冒险岛
魔域
天龙八部
DNF
征途
游戏：
传奇
天龙八部
魔域
奇迹
DNF公益服
传奇世界
神途
梦幻西游
天龙八部
魔域
DNF
冒险岛
奇迹
魔域
传奇
单职业
天龙
魔域
梦幻西游
DNF
天龙八部
关于我们
广告报价
|
版权声明
：本网站归南京网爵数码科技有限责任公司版权所有。
苏ICP备05016148号-1
公安备案号 32010202010177
