1. 以下の内容の JSP ページを作成します。JS と CSS は実際の状況に応じて決定されます。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
< html>
ここにタイトルを挿入/title> <br> <br><link href="Share.css" rel="stylesheet" type="text/css"> <br><script type="text/javascript" src=" ./js/common/ jquery-1.11.0.js"></script> <br><script type="text/javascript" src="popup.js"></script> <br><スクリプトタイプ= "text/javascript" src="testPopup.js"></script> <br><br></head> <br><body> ="right"> <br><div class="right_nav"> <br><h1>ユーザー管理</h1> <br><a href="#" onclick="" class=" but_tj"></a> <br></div> <br><div class="overlay" id="spm" style="display: none;"></div>< ;!-- ポップアップ レイヤーの下のページが操作不能になり、半透明になります --> <br><div class="Popup" style="display: none">,<!-- div を非表示にします - -> <br><div class="Popup_top"> <br><h1>追加</h1> <br><a href="#" class="Close"> = "閉じる" src="close.png" /><br></div><BR><div class="Popup_cen"> <br><br> = "100%" border="0" cellpadding="0" class="BD_tab"> <br><td style="width: 110px;" " right">名前:</td> <br><td><input name="" id="name" type="text" class="input220" <BR>onfocus="this.className = 'input220L';this.onmouseout=''" <BR>onblur="this.className='input220';this.onmouseout=function(){this.className='input220'};" <BR>onmousemove= this .className='input220Lg'" <BR>onmouseout="this.className='input220'"> <font color="red">*</font></td> <br>< / tr> <br><tr> <br><td align="right">ニックネーム:</td> <br><td><入力名="" id="ニックネーム" タイプ= "text" class="input220" <BR>onfocus="this.className='input220L';this.onmouseout=''" <BR>onblur="this.className='input220';this.onmouseout=function( ) {this.className='input220'};" <BR>onmousemove="this.className='input220Lg'" <BR>onmouseout="this.className='input220'"> <font color="red" > ;*</font></td> <br><tr> <br><td style="width: 110px;" : </td> <br><td><input name="" id="account" type="text" class="input220" <BR>onfocus="this.className='input220L';this . onmouseout=''" <BR>onblur="this.className='input220';this.onmouseout=function(){this.className='input220'};" <BR>onmousemove="this.className='input220Lg ' " <BR>onmouseout="this.className='input220'"> <font color="red">*</font></td> <br></tr> <br> </table> <br></div> <br></html> > <br>2. ポップアップ レイヤーと閉じるレイヤーを使用した 2 つの一般的なメソッド <br><br><br><br><br> コードをコピー <br><br>
</div> コードは次のとおりです。 🎜><div class="codebody" id="code60996"> <br>//ポップアップレイヤー <br>function isIE(num){ <br>var num = num || "", <br>tester = document.createElement('div'); <br>tester.innerHTML = '<!--[if IE ' num ']><i></i><![endif]-->'; <br>return !!tester.getElementsByTagName('i')[0]; <br>} <br>function PopupLayer(objClass,targetClass){ <br>$("." objClass).click(function(){ <br>$("#spm").show(); <br> var target=$("." targetClass); <br>var targetWidth=target.outerWidth(); <br>if(isIE(6)){ <br>$ ("#spm").hide(); <br>//$("select").hide(); <br>var top=$(document).scrollTop() $(window).height()/ 2; <br>target.css({"top":top "px"}); <br>$(window).scroll(function(){ <br>var top=$(document).scrollTop() $ (ウィンドウ).height()/2; <br>target.css({"top":top "px"}) <br>} <br>target.css({"margin- top":-parseInt(targetHeight/2) "px","margin-left":-parseInt(targetWidth/2) "px"}); <br>target.show(); <br>return false; <br><br>}); <br><br>} <br>//隐藏div の操作 <br>function closeLayer(objClass,targetClass) <br>{ <br>$("." objClass).click(function(){ <br> $(this).parents("." targetClass).hide(); <br>$("#spm").hide(); <br><br>}); <br>} <br><br> <br>3、1中调用3中js实现效果的js代码 </div>
<br><br><div class="codetitle">
<span>复制代<a style="CURSOR: pointer" data="38969" class="copybut" id="copybut38969" onclick="doCopy('code38969')"><u></u> 代码如下:</a></span> </div>$(function(){ <div class="codebody" id="code38969">//最初のパラメータは按钮のクラス属性値、2 番目のパラメータは被隐藏の div 属性値 <br>popupLayer ("but_tj","ポップアップ"); <br>closeLayer("閉じる","ポップアップ"); <br><br>//我们通過ポイント击追加または修正钮後に現在の操作の div 隐藏 <br>//closeAdd("Popup"); <br>function closeAdd(targetClass){ <br>$("." targetClass).hide(); <br>$("#spm").hide(); <br>} <br><br> <br>4、css样式 <br>
</div>
<br><br><div class="codetitle">复制代码<span><a style="CURSOR: pointer" data="78490" class="copybut" id="copybut78490" onclick="doCopy('code78490')"><u>代码如下:</u></a> </span>html {min-height: 100%;position:relative;overflow: hidden;} </div>body {background-color: #FFF;font: 12px 微软雅黑、Arial、サンセリフ;margin: 0;} <div class="codebody" id="code78490">h1 {フォントサイズ: 12px;フォントサイズ: 継承;フォントの重み: 通常;} <br>a {テキスト装飾: なし;} <br>a:hover {テキスト装飾:なし;} <br>.clear {オーバーフロー: 非表示;クリア: 両方;} <br>#right {margin-left: 190px;min-height: 100%;padding: 0;} <br>.right_top {height: 40px;背景色: #f5f5f5;color: #666666;border-bottom: 1px 実線 #e5e5e5;line-height: 40px;padding-left: 50px;position:相対;z-index: 1;} <br>。 right_top a {color: #2b7dbc;} <br>.right_nav {margin: 0 30px;height: 37px;background-color: #438eb9;line-height: 37px;position:相対;margin-top: 15px;} <br>.right_nav h1 {font-size: 18px;color: #ffffff;padding-left: 20px;} <br>.but_tj {幅: 68px;高さ: 27px;表示: ブロック;位置: 絶対;上: 7px;right : 30px;background: url(but_JG.png) no-repeat;text-align: center;line-height: 27px;font-size: 14px;color: #FFF;} <br>.but_tj:hover {background: url (but_JG1.png) no-repeat;} <br>.pind20 {padding-left: 20px;} <br>/*Popup*/ <br>.Popup {幅: 770px;高さ: 500px;位置: 絶対;左: 50%;top: 50%;margin-left: -400px;padding: 0 15px;margin-top: -250px;background-color: #FFF;border: 3px Solid #006caa;z-index: 999;} <br>.Popup_top {高さ: 40px;line-height: 40px;border-bottom: 1px ソリッド #cccccc;} <br>.Popup_top h1 {float: left;font-size: 14px;} <br>.Close {float : right;font-family: Arial、Helvetica、sans-serif;margin-right: 10px;margin-top: 10px;} <br>.Popup_cen {padding-top: 10px;width: 100%;height: 440px;overflow : 自動;} <br>.Popup_audit {パディングトップ: 10px;幅: 100%;高さ: 440px;} <br>.overlay {位置: 固定;z-インデックス: 990;幅: 100%;高さ: 100 %;top: 0;left: 0;filter: alpha(opacity = 60);opacity: 0.6;overflow: hidden;background-color: #000;} <br>/*BD_tab*/ <br>.BD_tab {width : 500px;margin: 0 auto;} <br>.BD_tab td {padding-top: 12px;} <br>.input220,.input220L,.input220Lg {幅: 220px;高さ: 28px;border: 1px ソリッド #d3d3d3; padding-left: 5px;line-height: 28px;font-family: "微软雅黑";color: #000;} <br>.input220L {border: 1pxソリッド #377bcb;background-color: #d5e8ff;} <br>.input220Lg {ボーダー: 1px ソリッド #7fb1eb;背景色: #d8e6f7;} <br>.input220 {ボーダー: 1px ソリッド #d3d3d3;} <br><br> <br>效果如下图 <br>
</div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>声明：</span><div>この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。</div></div></div><div class="nphpSytBox"><span>前の記事：<a class="dBlack" title="JSONのデータ構造をゼロから学ぶ_基礎知識" href="http://m.php.cn/ja/faq/12938.html">JSONのデータ構造をゼロから学ぶ_基礎知識</a></span><span>次の記事：<a class="dBlack" title="JSONのデータ構造をゼロから学ぶ_基礎知識" href="http://m.php.cn/ja/faq/12940.html">JSONのデータ構造をゼロから学ぶ_基礎知識</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>関連記事</h2><em><a href="http://m.php.cn/ja/article.html" class="bBlack"><i>続きを見る</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="-6t+ed+2i-1n-4w"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ja/faq/1609.html" title="Bootstrap リスト グループ コンポーネントの詳細な分析" class="aBlack">Bootstrap リスト グループ コンポーネントの詳細な分析</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/1640.html" title="JavaScript関数のカリー化の詳細説明" class="aBlack">JavaScript関数のカリー化の詳細説明</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/1949.html" title="JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)" class="aBlack">JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/2248.html" title="Angularjs は WeChat UI (weui) を統合します" class="aBlack">Angularjs は WeChat UI (weui) を統合します</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/2351.html" title="JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル" class="aBlack">JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/ja/"><b class="icon1"></b><p>ホームページ</p></a></li><li><a href="http://m.php.cn/ja/course.html"><b class="icon2"></b><p>コース</p></a></li><li><a href="http://m.php.cn/ja/wenda.html"><b class="icon4"></b><p>に質問</p></a></li><li><a href="http://m.php.cn/ja/login"><b class="icon5"></b><p>私の</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/ja/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/ja/"><b class="icon1"></b><span>ホームページ</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/course.html"><b class="icon2"></b><span>コース</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/article.html"><b class="icon3"></b><span>記事</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/wenda.html"><b class="icon4"></b><span>に質問</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/dic.html"><b class="icon6"></b><span>辞書</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/course/type/99.html"><b class="icon7"></b><span>マニュアル</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/xiazai/"><b class="icon8"></b><span>ダウンロード</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/faq/zt" title="特集"><b class="icon12"></b><span>特集</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/ja/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/ja/" >ホームページ</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/article.html" class="hover">記事</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/wenda.html" >に質問</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/course.html" >コース</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/faq/zt" >特集</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/xiazai" >ダウンロード</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/game" >ゲーム</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/dic.html" >辞書</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', {
slidesPerView : 'auto',
observer: true,//修改swiper自己或子元素时，自动初始化swiper
observeParents: true,//修改swiper的父元素时，自动初始化swiper
});
</script></div></div><!--顶部导航 end--><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
var _times = times || -1, //100次
_interval = interval || 20, //20毫秒每次
_self = this,
_selector = this.selector, //选择器
_iIntervalID; //定时器id
if( this.length ){ //如果已经获取到了，就直接执行函数
func && func.call(this);
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //是0就退出
clearInterval(_iIntervalID);
}
_times <= 0 || _times--; //如果是正数就 --
_self = $(_selector); //再次选择
if( _self.length ) { //判断是否取到
func && func.call(_self);
clearInterval(_iIntervalID);
}
}, _interval);
}
return this;
}
$("table.syntaxhighlighter").wait(function() {
$('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
$(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body></html>