Heim > Artikel > Web-Frontend > 基于jQuery的弹出隐藏层的窗口特效_布局与层

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

WBOYOriginal: 2016-05-16 18:03:411141Durchsuche

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

<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>

<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="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"    style="max-width:90%"  style="max-width:90%" alt="基于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需刷新才能执行]

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：js 分页全选或反选标识实现代码_javascript技巧Nächster Artikel：js字符串的各种格式的转换 ToString，Format_javascript技巧

In Verbindung stehende Artikel

Mehr sehen