ホームページ > 記事 > ウェブフロントエンド > jQuery_Layout とレイヤーに基づくポップアップ非表示レイヤーウィンドウ効果

jQuery_Layout とレイヤーに基づくポップアップ非表示レイヤーウィンドウ効果

WBOYオリジナル: 2016-05-16 18:03:411141ブラウズ

エフェクトを実行した後、メニューをクリックすると、登録フォームがポップアップ表示されます。これは、現在でも非常に人気のある多くのフォーラムのユーザー登録およびログイン機能と似ています。

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

填写留言或选择快捷留言

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

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

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

[Ctrl A すべて選択注: 外部 Js を導入する必要がある場合は、を実行するために更新する必要があります]

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：js ページングすべて選択または反転選択ロゴ実装 code_javascript スキル次の記事：js ページングすべて選択または反転選択ロゴ実装 code_javascript スキル

続きを見る

jQuery_Layout とレイヤーに基づくポップアップ非表示レイヤー ウィンドウ効果

関連記事

jQuery_Layout とレイヤーに基づくポップアップ非表示レイヤーウィンドウ効果