jQuery+jqmodal 팝 업 창 구현 코드 분명

먼저 위의 그림 에서 최종 효 과 는 다음 과 같다.
 
"정보 확인"클릭
 
확인 창 을 꺼 내 이미 작성 한 정 보 를 모두 안에 넣 어 보 는 것 이다.
메 시 지 는 안에 넣 으 면 간단 하고 주로 팝 업 창 을 예 쁘 게 해 야 한다.
그래서 jQuery+jqmodal 을 선 택 했 습 니 다.
실현 방법 은 다음 과 같다.1.페이지 에서 jquery-1.4.2.js 와 jqModal.js 를 참조 하고 jQuery 가 앞 에 있어 야 한다.왜냐하면 jqmodal 은 jQuery 를 바탕 으로 하기 때문이다.2.jqModal.css 를 구축 하고 인용 합 니 다.주로 미 공 들 의 동쪽 입 니 다.div.jqmDialog 의 display 는 none 입 니 다.높이 와 너 비 를 잘 설정 하고 아래 를 가 려 야 합 니 다.예 쁩 니 다~~제 가 게 으 름 을 피 워 서 jqmodal 예제 의 css 를 약간 바 꾸 었 습 니 다.)다음 과 같 습 니 다

 
/*div.whiteOverlay { background: url(dialog/jqmBG.gif) white; }*/ 
div.jqDrag {cursor: move;} 

/* jqmModal dialog CSS courtesy of; 
Brice Burgess <[email protected]> */ 

div.jqmDialog { 
display: none; 

position: fixed; 
top: 106px; 
left: 50%; 

margin-left: -450px; 
width: 900px; 

overflow: hidden; 
font-family:verdana,tahoma,helvetica; 
} 

/* Fixed posistioning emulation for IE6 
Star selector used to hide definition from browsers other than IE6 
For valid CSS, use a conditional include instead */ 
* html div.jqmDialog { 
position: absolute; 
top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px'); 
} 


/* [[[ Title / Top Classes ]]] */ 
div.jqmdTC { 
background: #d5ff84 url(dialog/sprite.gif) repeat-x 0px -82px; 
color: #528c00; 
padding: 7px 22px 5px 5px; 
font-family:"sans serif",verdana,tahoma,helvetica; 
font-weight: bold; 
* zoom: 1; 
} 
div.jqmdTL { background: url(dialog/sprite.gif) no-repeat 0px -41px; padding-left: 3px;} 
div.jqmdTR { background: url(dialog/sprite.gif) no-repeat right 0px; padding-right: 3px; * zoom: 1;} 


/* [[[ Body / Message Classes ]]] */ 
div.jqmdBC { 
background: url(dialog/bc.gif) repeat-x center bottom; 
padding: 7px 7px 7px; 
height: 630px; 
overflow: auto; 
} 
div.jqmdBL { background: url(dialog/bl.gif) no-repeat left bottom; padding-left: 7px; } 
div.jqmdBR { background: url(dialog/br.gif) no-repeat right bottom; padding-right: 7px; * zoom: 1 } 

div.jqmdMSG { color: #317895; font-size:large; } 


/* [[[ Button classes ]]] */ 
input.jqmdX { 
position: absolute; 
right: 7px; 
top: 4px; 
padding: 0 0 0 19px; 
height: 19px; 
width: 0px; 
background: url(dialog/close.gif) no-repeat top left; 
overflow: hidden; 
} 
input.jqmdXFocus {background-position: bottom left; outline: none;} 

div.jqmdBC button, div.jqmdBC input[type="submit"] { 
margin: 8px 10px 4px 10px; 
color: #777; 
background-color: #fff; 
cursor: pointer; 
} 

div.jqmDialog input:focus, div.jqmDialog input.iefocus { background-color: #eaffc3; } 

웹 페이지 에 팝 업 창 div 를 만 듭 니 다.class="jqmDialog"(css 에 숨겨 진 것)4.이 div 에 표시 할 것 을 잘 정리 합 니 다~과정 약:)5.jquery win.js 를 만 들 고 인용 합 니 다.jqmodal 참조 뒤에 놓 으 십시오.이 유 는 위 와 같 습 니 다~~,코드 는 다음 과 같 습 니 다.다른 것 은 모두 검 증 된 정보 8.위의 js 에서 비교적 중요 한 것 은 이 if(PageClient Validate()는 팝 업 창 이 뜨 기 전에 페이지 의 모든 인증 컨트롤 에 대한 인증 작업 을 수행 할 수 있 습 니 다.