1. 다음 내용으로 jsp 페이지를 생성합니다. js와 css는 실제 상황에 따라 결정됩니다.
<%@ page 언어="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
html>
< ;head>
여기에 제목 삽입< /제목>
코드는 다음과 같습니다. 🎜>
//팝업 레이어
function isIE(num){
var num = num || "",
tester = document.createElement('div');
tester.innerHTML = '';
return !!tester.getElementsByTagName('i')[0];
}
함수 popupLayer(objClass,targetClass){
$("." objClass).click(function(){
$("#spm").show();
var target=$("." targetClass);
var targetWidth=target.outerWidth();
var targetHeight=target.outerHeight()
if(isIE(6)){
$ ("#spm").hide();
//$("select").hide()
var top=$(document).scrollTop() $(window).height()/ 2;
target.css({"top":top "px"})
$(window).scroll(function(){
var top=$(document).scrollTop() $ (window).height()/2;
target.css({"top":top "px"})
})
}
target.css({"margin- top":-parseInt(targetHeight/2) "px","margin-left":-parseInt(targetWidth/2) "px"});
target.show();
return false;
});
}
//隐藏div적 활동
function closeLayer(objClass,targetClass)
{
$("." objClass).click(function(){
$(this).parents("." targetClass).hide();
$("#spm").hide()
});
}
3、1中调用3中js实现效果적js代码
$(function(){
//第一个参数是按钮的class属性值,第二个是被隐藏的div属性值
popupLayer ("but_tj","팝업")
closeLayer("닫기","팝업")
});
//저희는 보통의 div隐藏
//closeAdd("팝업");
function closeAdd(targetClass){
$("." targetClass).hide();
$("#spm").hide();
}
4、css样式
html {최소 높이: 100%;위치: 상대;오버플로: 숨김;}
body {배경색: #FFF;글꼴: 12px 微软雅黑, Arial, sans-serif;margin: 0;}
h1 {글꼴 크기: 12px;글꼴 크기: 상속;글꼴 무게: 일반;}
a {텍스트 장식: 없음;}
a:hover {텍스트 장식: 없음;}
.clear {오버플로: 숨겨진; 지우기: 둘 다;}
#right {margin-left: 190px;min-height: 100%;padding: 0;}
.right_top {높이: 40px;배경 색상: #f5f5f5;색상: #666666;테두리 하단: 1px 단색 #e5e5e5;줄 높이: 40px;왼쪽 패딩: 50px;위치: 상대;z-색인: 1;}
. right_top a {색상: #2b7dbc;}
.right_nav {여백: 0 30px;높이: 37px;배경색: #438eb9;줄 높이: 37px;위치: 상대;여백-상단: 15px;}
.right_nav h1 {글꼴 크기: 18px;색상: #ffffff;왼쪽 패딩: 20px;}
.but_tj {너비: 68px;높이: 27px;디스플레이: 블록;위치: 절대;상단: 7px;오른쪽 : 30px;배경: url(but_JG.png) no-repeat;text-align: center;line-height: 27px;font-size: 14px;color: #FFF;}
.but_tj:hover {배경: url (but_JG1.png) 반복 없음;}
.pind20 {padding-left: 20px;}
/*Popup*/
.Popup {너비: 770px;높이: 500px;위치: 절대;왼쪽 : 50%;상단: 50%;여백-왼쪽: -400px;패딩: 0 15px;여백-상단: -250px;배경색: #FFF;테두리: 3px 단색 #006caa;z-색인: 999;}
.Popup_top {높이: 40px;line-height: 40px;border-bottom: 1px solid #cccccc;}
.Popup_top h1 {float: left;font-size: 14px;}
.Close {float : 오른쪽;글꼴 계열: Arial, Helvetica, sans-serif;margin-right: 10px;margin-top: 10px;}
.Popup_cen {padding-top: 10px;width: 100%;height: 440px;overflow : 자동;}
.Popup_audit {패딩 상단: 10px;너비: 100%;높이: 440px;}
.overlay {위치: 고정;z-인덱스: 990;너비: 100%;높이: 100 %;상단: 0;왼쪽: 0;필터: 알파(불투명도 = 60);불투명도: 0.6;오버플로: 숨김;배경색: #000;}
/*BD_tab*/
.BD_tab {너비 : 500px;여백: 0 자동;}
.BD_tab td {padding-top: 12px;}
.input220,.input220L,.input220Lg {너비: 220px;높이: 28px;테두리: 1px 솔리드 #d3d3d3; 왼쪽 여백: 5px;줄 높이: 28px;글꼴 계열: "微软雅黑";색상: #000;}
.input220L {테두리: 1px 단색 #377bcb;배경 색상: #d5e8ff;}
.input220Lg {테두리: 1px 솔리드 #7fb1eb;배경색: #d8e6f7;}
.input220 {테두리: 1px 솔리드 #d3d3d3;}
效果如下图