Home >Web Front-end >JS Tutorial >Pop-up hidden layer window effects based on jQuery_Layout and layers

Pop-up hidden layer window effects based on jQuery_Layout and layers

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal: 2016-05-16 18:03:411271browse

After running the effect, click on the menu and a registration form will pop up, similar to the user registration and login functions of many forums, which is still very popular at present.

<title>Pop-up layer</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="/static/imghwm/default1.png" data-src="images/message_1.jpg" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="Pop-up hidden layer window effects based on jQuery_Layout and layers" ></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 select all Note: If you need to introduce external Js, you need to refresh to execute ]

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：js paging select all or reverse selection logo implementation code_javascript skillsNext article：js paging select all or reverse selection logo implementation code_javascript skills

See more

Pop-up hidden layer window effects based on jQuery_Layout and layers

Related articles