1. 다음 내용으로 jsp 페이지를 생성합니다. js와 css는 실제 상황에 따라 결정됩니다.
<%@ page 언어="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
html>
< ;head>
여기에 제목 삽입< /제목> <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><script type="text/javascript" src="testPopup.js"><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> = "Close" src="close.png" /></a> <BR></div> <BR><div class="Popup_cen"> <BR><BR>< = "100%" border="0" cellpacing="0" cellpadding="0" class="BD_tab"> <BR><tr> <br><td style="width: 110px;" " 오른쪽">이름:</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></div> <BR></html> > <BR>2. 팝업 레이어와 닫기 레이어를 사용하는 두 가지 일반적인 방법 <BR><BR><BR><BR><BR>코드 복사 <BR></script>
</div>
<br> 코드는 다음과 같습니다. 🎜><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>함수 popupLayer(objClass,targetClass){ <br>$("." objClass).click(function(){ <br>$("#spm").show(); <br> var target=$("." targetClass); <br>var targetWidth=target.outerWidth(); <br>var targetHeight=target.outerHeight() <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() $ (window).height()/2; <br>target.css({"top":top "px"}) <br>}) <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>
</div> <br>3、1中调用3中js实现效果적js代码 <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="38969" class="copybut" id="copybut38969" onclick="doCopy('code38969')"><u>复system代码</u></a></span> 代码如下:</div>
<div class="codebody" id="code38969"> <br>$(function(){ <br>//第一个参数是按钮的class属性值,第二个是被隐藏的div属性值 <br>popupLayer ("but_tj","팝업") <br>closeLayer("닫기","팝업") <br>}); <br><br>//저희는 보통의 div隐藏 <br>//closeAdd("팝업"); <br>function closeAdd(targetClass){ <br>$("." targetClass).hide(); <br>$("#spm").hide(); <br>} <br>
</div> <br>4、css样式 <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="78490" class="copybut" id="copybut78490" onclick="doCopy('code78490')"><u>复代码</u></a></span> 代码如下:</div>
<div class="codebody" id="code78490"> <br>html {최소 높이: 100%;위치: 상대;오버플로: 숨김;} <br>body {배경색: #FFF;글꼴: 12px 微软雅黑, Arial, sans-serif;margin: 0;} <br>h1 {글꼴 크기: 12px;글꼴 크기: 상속;글꼴 무게: 일반;} <br>a {텍스트 장식: 없음;} <br>a:hover {텍스트 장식: 없음;} <br>.clear {오버플로: 숨겨진; 지우기: 둘 다;} <br>#right {margin-left: 190px;min-height: 100%;padding: 0;} <br>.right_top {높이: 40px;배경 색상: #f5f5f5;색상: #666666;테두리 하단: 1px 단색 #e5e5e5;줄 높이: 40px;왼쪽 패딩: 50px;위치: 상대;z-색인: 1;} <br>. right_top a {색상: #2b7dbc;} <br>.right_nav {여백: 0 30px;높이: 37px;배경색: #438eb9;줄 높이: 37px;위치: 상대;여백-상단: 15px;} <br>.right_nav h1 {글꼴 크기: 18px;색상: #ffffff;왼쪽 패딩: 20px;} <br>.but_tj {너비: 68px;높이: 27px;디스플레이: 블록;위치: 절대;상단: 7px;오른쪽 : 30px;배경: url(but_JG.png) no-repeat;text-align: center;line-height: 27px;font-size: 14px;color: #FFF;} <br>.but_tj:hover {배경: url (but_JG1.png) 반복 없음;} <br>.pind20 {padding-left: 20px;} <br>/*Popup*/ <br>.Popup {너비: 770px;높이: 500px;위치: 절대;왼쪽 : 50%;상단: 50%;여백-왼쪽: -400px;패딩: 0 15px;여백-상단: -250px;배경색: #FFF;테두리: 3px 단색 #006caa;z-색인: 999;} <br>.Popup_top {높이: 40px;line-height: 40px;border-bottom: 1px solid #cccccc;} <br>.Popup_top h1 {float: left;font-size: 14px;} <br>.Close {float : 오른쪽;글꼴 계열: 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 %;상단: 0;왼쪽: 0;필터: 알파(불투명도 = 60);불투명도: 0.6;오버플로: 숨김;배경색: #000;} <br>/*BD_tab*/ <br>.BD_tab {너비 : 500px;여백: 0 자동;} <br>.BD_tab td {padding-top: 12px;} <br>.input220,.input220L,.input220Lg {너비: 220px;높이: 28px;테두리: 1px 솔리드 #d3d3d3; 왼쪽 여백: 5px;줄 높이: 28px;글꼴 계열: "微软雅黑";색상: #000;} <br>.input220L {테두리: 1px 단색 #377bcb;배경 색상: #d5e8ff;} <br>.input220Lg {테두리: 1px 솔리드 #7fb1eb;배경색: #d8e6f7;} <br>.input220 {테두리: 1px 솔리드 #d3d3d3;} <br>
</div> <br>效果如下图 <br><img src="http://files.jb51.net/file_images/article/201405/201405191717423.gif?201441917180" alt="JQuery 팝업 레이어 예제를 사용자 정의할 수 있습니다_jquery" ></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/ko/faq/12938.html">JSON 데이터 구조를 처음부터 배우기_기본지식</a></span><span>다음 기사：<a class="dBlack" title="JSON 데이터 구조를 처음부터 배우기_기본지식" href="http://m.php.cn/ko/faq/12940.html">JSON 데이터 구조를 처음부터 배우기_기본지식</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>관련 기사</h2><em><a href="http://m.php.cn/ko/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/ko/faq/1609.html" title="Bootstrap 목록 그룹 구성 요소에 대한 심층 분석" class="aBlack">Bootstrap 목록 그룹 구성 요소에 대한 심층 분석</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/1640.html" title="JavaScript 함수 커링에 대한 자세한 설명" class="aBlack">JavaScript 함수 커링에 대한 자세한 설명</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/1949.html" title="JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)" class="aBlack">JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/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/ko/faq/2351.html" title="JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술" class="aBlack">JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_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/ko/"><b class="icon1"></b><p>집</p></a></li><li><a href="http://m.php.cn/ko/course.html"><b class="icon2"></b><p>강의</p></a></li><li><a href="http://m.php.cn/ko/wenda.html"><b class="icon4"></b><p>Q&A</p></a></li><li><a href="http://m.php.cn/ko/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/ko/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/ko/"><b class="icon1"></b><span>집</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/course.html"><b class="icon2"></b><span>강의</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/article.html"><b class="icon3"></b><span>기사</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/wenda.html"><b class="icon4"></b><span>Q&A</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/dic.html"><b class="icon6"></b><span>사전</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/course/type/99.html"><b class="icon7"></b><span>수동</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/xiazai/"><b class="icon8"></b><span>다운로드</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/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/ko/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/ko/" >집</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/article.html" class="hover">기사</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/wenda.html" >Q&A</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/course.html" >강의</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/faq/zt" >주제</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/xiazai" >다운로드</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/game" >게임</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/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:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" 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>