명확한 code_jquery를 달성하기 위한 jQuery jqmodal 팝업 창-JS 튜토리얼-php.cn

첫 번째 사진, 최종 효과는 다음과 같습니다

명확한 code_jquery를 달성하기 위한 jQuery jqmodal 팝업 창

'정보 확인'을 클릭하세요

명확한 code_jquery를 달성하기 위한 jQuery jqmodal 팝업 창

확인창이 팝업되며, 입력하신 정보를 모두 입력하시면 보실 수 있습니다.

정보를 넣는 방법은 아주 간단합니다. 팝업창을 보기 좋게 만드는 것이 가장 중요합니다.

그래서 저는 jQuery jqmodal 구현을 선택했습니다

구현 방법은 다음과 같습니다
1. jqmodal은 jQuery를 기반으로 하기 때문에 페이지에서 jquery-1.4.2.js, jqModal.js를 참조하세요.

2. jqModal.css를 만들고 인용합니다. 주로 div.jqmDialog가 표시되지 않습니다. 높이와 너비가 잘 설정되어야 하단이 가려져서 보기 좋아요~~, 게을러서 jqmodal 예제의 CSS를 약간 변경했습니다 :) 다음과 같습니다:

코드 복사 코드는 다음과 같습니다.

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

/* jqmModal 대화 상자 CSS 제공: 
Brice Burgess  */ 

div.jqmDialog { 
디스플레이: 없음; 

위치: 고정; 
상단: 106px; 
왼쪽: 50%; 

너비: 900px ; 

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

/* IE6의 고정 위치 지정 에뮬레이션 
정의를 숨기는 데 사용됨 IE6 이외의 브라우저에서 
유효한 CSS의 경우 대신 조건부 포함을 사용하세요. */ 
* html div.jqmDialog { 
position:absolute;
top:expression((document.documentElement.scrollTop || document.body.scrollTop) Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) 'px') 
} 


/* [ [[ 제목 / 상위 클래스 ]]] */ 
div.jqmdTC { 
배경: #d5ff84 url(dialog/sprite.gif) 반복-x 0px -82px 
색상: 
패딩: 7px 22px 5px 5px; 
font-family: "sans serif",verdana,tahoma,helvetica; 
font-weight: 굵게: 
} 
 div.jqmdTL { 배경: url(dialog/sprite.gif) 반복 없음 0px -41px; 왼쪽 패딩: 3px;} 
div.jqmdTR { 배경: url(dialog/sprite.gif) 반복 없음 오른쪽 0px ; 오른쪽 패딩: 3px ; * 확대/축소: 1;} 


/* [[[ 본문 / 메시지 클래스 ]]] */ 
div.jqmdBC { 
배경: url( 대화상자/bc.gif) 반복-x 중앙 하단; 
높이: 630px; 
overflow: auto; 대화상자/bl.gif) 반복 없음 왼쪽 하단; } 
div.jqmdBR { 배경: url(dialog/br.gif) 반복 없음 오른쪽 하단; : 1 } 
 
div.jqmdMSG { color: #317895; 글꼴 크기:large; } 


/* [[[ 버튼 클래스 ]]] */ 
입력 .jqmdX { 
 위치: 절대; 
 상단: 4px; 
 높이: 19px; >배경: url(dialog /close.gif) no-repeat 왼쪽 상단; 
overflow: 숨김 
} 
input.jqmdXFocus {배경 위치: 왼쪽 하단;} 
 
div.jqmdBC 버튼, div.jqmdBC input[type="submit"] { 
여백: 8px 10px 4px 10px 
색상: 
배경색상: #fff; >cursor: 포인터; 
} 

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

 
3. 웹페이지에 팝업창 div가 뜨는데, class="jqmDialog"(CSS에 숨겨져 있는 것)를 주목하세요

4. 이 div에 표시해야 할 것들을 정리~~과정은 간략하게 설명하겠습니다. :) 

5. jquerywin.js를 만들어 인용하고, 조심해서 jqmodal 참조 뒤에 넣으세요. 이유는 같습니다~~, 코드는 다음과 같습니다. 




코드 복사 

코드는 다음과 같습니다.

$().ready(function() {
$(' #ex3a').jqm({

trigger: '#ex3aTrigger', overlay: 30 , /* 0-100 (int) : 0은 꺼짐/투명, 100은 불투명 */ overlayClass: 'whiteOverlay'}); /* 제목에 핸들 할당 */ // IE는 :hover를 지원하지 않습니다. .jqmdX') .hover(

function(){ $(this).addClass( 'jqmdXFocus'); },

function(){ $(this).removeClass('jqmdXFocus'); })
.focus(
function(){ this.hideFocus=true; $(this ).addClass('jqmdXFocus'); })
.blur(
function(){ $( this).removeClass('jqmdXFocus') })

});
6. 팝업 창을 실행할 수 있는 트리거 설정이 있거나, 트리거 없이 js를 직접 사용할 수도 있습니다.

코드 복사 코드는 다음과 같습니다.

저자별 최신 기사