欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！

您现在的位置是：首页 > web前端

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

程序员文章站 2022-05-10 17:53:49

...

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

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<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>
<div class="pro_list"> 
<div class="menu"> 
<input name="button" src="http://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="http://www.jb51.net/jscss/demoimg/201108/pro_l_menu2.jpg" type="image" id="message_show2" class="mess_show">
</div> 
<div class="menu"> 
<input name="button" src="http://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="http://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="http://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="http://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="http://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="http://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="http://www.jb51.net/jscss/demoimg/201108/pro_l_menu2.jpg" type="image" id="message_show9" class="mess_show">
</div> 
</div> 
</div> 
 
 
<div class="message_box" id="message"> 
<table width="550" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="5" height="89"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aW1hZ2VzL21lc3NhZ2VfMS5qcGc=" alt="基于jQuery的弹出隐藏层的窗口特效_布局与层" title="基于jQuery的弹出隐藏层的窗口特效_布局与层"></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">

填写留言或选择快捷留言

现在就想加入，请给我预留名额。

对这个项目很感兴趣，尽快寄资料

请问我这个地方有加入者了吗？

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

相关标签：弹出隐藏层

上一篇： jquery对dom的操作常用方法整理_jquery

下一篇：简单委托：在主窗口F1点击菜单打开另一个子窗口F2时，将主窗口te

推荐阅读