명확한 code_jquery를 달성하기 위한 jQuery jqmodal 팝업 창
- WBOY원래의
- 2016-05-16 18:25:001334검색
첫 번째 사진, 최종 효과는 다음과 같습니다
'정보 확인'을 클릭하세요
확인창이 팝업되며, 입력하신 정보를 모두 입력하시면 보실 수 있습니다.
정보를 넣는 방법은 아주 간단합니다. 팝업창을 보기 좋게 만드는 것이 가장 중요합니다.
그래서 저는 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를 직접 사용할 수도 있습니다.
.focus(
function(){ this.hideFocus=true; $(this ).addClass('jqmdXFocus'); })
.blur(
function(){ $( this).removeClass('jqmdXFocus') })
});
6. 팝업 창을 실행할 수 있는 트리거 설정이 있거나, 트리거 없이 js를 직접 사용할 수도 있습니다.
코드 복사 코드는 다음과 같습니다.