jQuery_Layout 및 레이어를 기반으로 한 팝업 숨겨진 레이어 창 효과-JS 튜토리얼-php.cn

jQuery_Layout 및 레이어를 기반으로 한 팝업 숨겨진 레이어 창 효과

WBOY

풀어 주다： 2016-05-16 18:03:41

원래의

1175명이 탐색했습니다.

효과를 실행한 후 메뉴를 클릭하면 등록 양식이 팝업됩니다. 이는 현재에도 여전히 인기가 많은 많은 포럼의 사용자 등록 및 로그인 기능과 유사합니다.

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

</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>
<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> 
 
<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_Layout 및 레이어를 기반으로 한 팝업 숨겨진 레이어 창 효과" ></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">

填写留言或选择快捷留言

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

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

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