基于jQuery的弹出隐藏层的窗口特效_布局与层

来源：动视网责编：小采时间：2020-11-27 21:00:14

基于jQuery的弹出隐藏层的窗口特效_布局与层

基于jQuery的弹出隐藏层的窗口特效_布局与层:运行效果后，点击菜单，会弹出一个注册表单，类似于很多论坛的用户注册及登录功能那样，目前还是挺流行的。弹出层 $(document).ready(function(){ $(#button_2).click(function(){ $(#message).hide(); }); $(

推荐度：

点击下载本文 文档为doc格式

导读基于jQuery的弹出隐藏层的窗口特效_布局与层:运行效果后，点击菜单，会弹出一个注册表单，类似于很多论坛的用户注册及登录功能那样，目前还是挺流行的。弹出层 $(document).ready(function(){ $(#button_2).click(function(){ $(#message).hide(); }); $(

运行效果后，点击菜单，会弹出一个注册表单，类似于很多论坛的用户注册及登录功能那样，目前还是挺流行的。

<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=""><img src="https://www.gxlcms.com/Uploads/images/message_1.jpg" width="550" 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需刷新才能执行]

基于jQuery的弹出隐藏层的窗口特效_布局与层

推荐度：

点击下载本文 文档为doc格式

标签：特效弹出 jQuery

热门焦点

基于jQuery的弹出隐藏层的窗口特效_布局与层

基于jQuery的弹出隐藏层的窗口特效_布局与层

基于jQuery的弹出隐藏层的窗口特效_布局与层

最新推荐

猜你喜欢

热门推荐