1. jQuery “Simple Modal Box”의 모달 창 2. jQuery 플러그인 “LeanModal”

모달 창에 콘텐츠 표시. 데모 페이지에서 플러그인이 작동하는 모습을 보려면 가입 양식 또는 기본 콘텐츠 링크를 클릭하세요.

3. jQuery 플러그인 “ToastMessage”

팝업 메시지. 플러그인은 두 가지 버전으로 제공됩니다. 어떤 경우에는 특정 시간이 지나면 메시지가 저절로 사라지지만, 두 번째 구현에서는 메시지를 닫으려면 버튼을 클릭해야 합니다.

4. 모달창에 나타나는 콘텐츠

플러그인 "공개". 플러그인이 작동하는 모습을 보려면 데모 페이지에서 "Fire A Reveal Modal" 버튼을 클릭하세요.

5. 귀여운 대화 상자

플러그인이 실제로 작동하는 모습을 보려면 데모 페이지에서 십자가를 클릭하세요.

6. Mootools 모달 창, “MooDialog” 플러그인 7. 화면 상단의 jQuery 팝업 패널 8. jQuery 팝업 창

양식 표시를 위한 jQuery 플러그인 피드백팝업 창에서.

10. 구현을 위한 MooTools 플러그인 “LightFace” 대화 상자페이스북

Facebook 스타일 대화 상자. 정적 정보 외에도 이미지, 프레임, Ajax 요청. 플러그인 작동 방식에 대한 다양한 설정은 매우 강력한 도구입니다. 매우 세련되고 기능적으로 보입니다. 데모 페이지의 링크를 따라가면 다양한 콘텐츠의 예를 볼 수 있습니다.

11. jQuery 모달 창

jQuery의 깔끔한 팝업 대화 상자.

12. jQuery 모달 창

귀여운 팝업 모달 창. 세 가지 스타일. 데모 페이지에는 창을 열 수 있는 3개의 링크가 포함되어 있습니다.

13. jQuery 모달 창

여러 유형의 팝업 모달 창. 플러그인이 작동하는 모습을 보려면 데모 페이지의 링크를 클릭하세요.

15. 페이지 상단에 팝업되는 메시지

메시지는 페이지 상단에 표시되며 페이지는 흐리게 표시됩니다. 팝업 메시지를 보려면 데모 페이지에서 "Click me"를 클릭하세요. 십자가를 클릭하면 닫힙니다. jQuery를 사용하여 구현했습니다.

16. 자바스크립트의 모달 창 “ModalBox”

팝업 및 페이지 새로고침을 사용하지 않고 최신 모달 대화 상자를 구현합니다. 데모 페이지에서 "데모 시작" 버튼을 클릭하면 스크립트가 실제로 작동하는 모습을 볼 수 있습니다.

17. 프로토타입 라이브러리를 사용하는 “Leightbox” 플러그인

모달 창에 콘텐츠를 표시하기 위한 플러그인입니다.

에 대해 말하다 다양한 기술웹 사이트를 구축할 때 모달 창을 만드는 몇 가지 방법을 말하지 않는 것은 어리석은 일입니다. 팝업 및 모달 창 사용의 목적, 유용성 및 새로운 문제에 대해서는 논의하지 않습니다. 이러한 창을 만드는 많은 예 중 하나만 살펴보겠습니다.
및와 같은 특수 플러그인을 사용할 수 없는 상황이 있으므로 자신만의 플러그인을 만드는 방법을 이해하는 것이 좋습니다.

이를 수행하는 방법을 살펴보겠습니다.

HTML

다음 속성을 가진 태그를 추가하는 것부터 시작해 보겠습니다.

• href - #?w=500은 창 너비를 나타냅니다.
• rel – 각 창의 고유 속성
• class="poplight" – 팝업 창을 표시하기 위한 클래스

< a href= "#?w=500" rel= "popup_name" class = "poplight" >실제 창 보기 - 너비 = 500px

실제 창 보기 - 너비 = 500px

다음으로 팝업용 인라인 마크업을 생성해야 합니다. 예를 들어 콘텐츠 하단 등 페이지의 아무 곳에나 배치할 수 있습니다. 팝업 ID는 태그의 rel 속성과 일치합니다.
그러면 링크와 팝업이 함께 연결됩니다.

표제

원하는 텍스트

이제 페이지에서 창의 위치를 ​​파악했습니다. 이제 스타일을 사용하여 창을 장식하고, 말하자면 괜찮은 모양을 부여하겠습니다.

CSS 레이아웃

더 명확하게 하기 위해 창의 스타일 매개변수에 대한 몇 가지 설명을 적어 두었습니다. 팝업 창의 크기는 다양할 수 있으므로 CSS popup_block에 창의 가장자리를 지정하지 않습니다. 필요한 크기를 계산하는 것이 바로 의 작업입니다.

#fade ( 표시 : 없음 ; /* --기본숨겨진--*/ 배경: rgba ( 7 , 87 , 207 , 0.8 ) ; 위치: 고정; 왼쪽: 0; 상단: 0; 너비: 100%; 높이: 100%; 불투명도: .80; Z-색인: 9999; ) .popup_block ( 디스플레이: 없음 ; /*--기본적으로 숨겨짐--*/ 배경: #fff ; 패딩: 20px ; 테두리: 8px 솔리드 rgb (134 , 134 , 134 ) ; 부동: 왼쪽 ; 글꼴 크기: 85 %; 위치: 고정; 위쪽: 50%; 왼쪽: 50%; 색상: #000; 최대 너비: 750px; 최소 너비: 320px; 높이: 자동; Z-색인: 99999; /*--CSS3 블록 그림자 --*/ -webkit-box-shadow: 0px 0px 20px #000 ; -moz-box-shadow: 0px 0px 20px #000 ; box-shadow : 0px 0px 20px #000 ; /*--CSS3 모서리 반올림--* / -webkit-border-radius: 12px ; -moz-border-radius: 12px ; border-radius: 12px ; ) .popup_block p ( 글꼴 무게: 400 ; 패딩: 0 ; 여백: 0 ; 색상: #000 ; 라인 -height : 1.6 ; .popup_block h2 ( 여백 : 0px 0 10px ; color : rgb (43 , 43 , 43 ) ; Font-weight : 400 ; text-align : center ; text-shadow : 1px 1px 2px #0D0C0C ; ) / * 닫기 버튼 만들기 */ .close ( background-color : rgba ( 61 , 61 , 61 , 0.8 ) ; 테두리: 2px 실선 #ccc ; 높이: 25px; 줄 높이: 20px; 위치: 절대; 오른쪽: -17px; 글꼴 두께: 굵게; 텍스트 정렬: 중앙; 텍스트 장식: 없음; 패딩: 0; 상단: -17px; 너비: 25px; -웹킷-국경-반경: 50% ; -moz-경계-반경: 50% ; -ms-경계-반경: 50% ; -o-경계 반경: 50% ; 테두리 반경 : 50% ; -moz-box-shadow: 1px 1px 3px #000 ; -webkit-box-shadow: 1px 1px 3px #000 ; 상자 그림자 : 1px 1px 3px #000 ; ) .close : 이전 ( 색상 : rgba (255 , 255 , 255 , 0.9 ) ; 내용 : "X" ; 글꼴 크기 : 12px ; 텍스트 그림자 : 0 -1px rgba (0 , 0 , 0 , 0.9 ) ; ) .close : hover ( 배경색 : rgba ( 252 , 20 , 0 , 0.8 ) ; ) .shadow ( 상자 그림자 : 4px 4px 10px #857373 ; -webkit-box-shadow: 4px 4px 10px #857373 ; -moz- box-shadow: 4px 4px 10px #857373; 패딩: 0 ; ) /*--IE6의 위치 고정--*/ * html #fade ( 위치 : 절대 ; ) * html .popup_block ( 위치 : 절대 ; )

#fade ( 디스플레이: 없음;/*--기본적으로 숨김--*/ 배경: rgba(7, 87, 207, 0.8); 위치: 고정; 왼쪽: 0; 위쪽: 0; 너비: 100%; 높이: 100%; 불투명도: .80; z-index: 9999; ) .popup_block ( 디스플레이: 없음; /*--기본적으로 숨김--*/ 배경: #fff; 패딩: 20px; 테두리: 8px 솔리드 rgb(134, 134, 134); 부동: 왼쪽; 글꼴 크기: 85%; 위치: 고정; 위쪽: 50%; 왼쪽: 50%; 색상: #000; 최대 너비: 750px; 최소 너비: 320px; 높이: 자동 ; z-index: 99999; /*--CSS3 상자 그림자--*/ -webkit-box-shadow: 0px 0px 20px #000; -moz-box-shadow: 0px 0px 20px #000; box-shadow: 0px 0px 20px #000; /*--CSS3 모서리 반올림--*/ -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; ) .popup_block p ( 글꼴 무게: 400; 패딩: 0; 여백: 0; 색상: #000; 줄 높이: 1.6;).popup_block h2 (여백: 0px 0 10px; 색상: rgb(43, 43, 43); 글꼴 두께: 400; 텍스트 정렬 : center; text-shadow: 1px 1px 2px #0D0C0C; ) /* 닫기 버튼 만들기 */ .close ( background-color: rgba(61, 61, 61, 0.8); 테두리: 2px 솔리드 #ccc; 높이: 25px; 줄 높이: 20px; 위치: 절대; 오른쪽: -17px; 글꼴 두께: 굵게; 텍스트 정렬: 중앙; 텍스트 장식: 없음;패딩: 0; 상단: -17px; 너비: 25px; -웹킷-국경-반경: 50%; -moz-경계-반경: 50%; -ms-경계 반경: 50%; -o-경계 반경: 50%; 테두리 반경: 50%; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; 상자 그림자: 1px 1px 3px #000; ) .close:before ( 색상: rgba(255, 255, 255, 0.9); 내용: "X"; 글꼴 크기: 12px; 텍스트 그림자: 0 -1px rgba(0, 0, 0, 0.9); ) .close:hover ( 배경색: rgba(252, 20, 0, 0.8); ) .shadow ( box-shadow:4px 4px 10px #857373; -webkit-box-shadow:4px 4px 10px #857373; -moz- box-shadow:4px 4px 10px #857373; padding:0; ) /*--IE6의 위치 고정--*/ *html #fade ( position:absolute; ) *html .popup_block ( position:absolute; )

창문의 형성과 그 모습와 함께 CSS를 사용하여, 특별한 어려움은 없을 것 같아요. 스타일을 직접 등록할 수 있습니다. HTML 페이지를 태그와 태그 사이에 넣거나 별도의 스타일 파일에 넣을 수도 있습니다. 일반적으로 style.css 파일 등입니다.

JQuery 설정

을 위한 본격적인 작업모달 창에서 jQuery를 연결해야 하는데, 이 라이브러리의 작업에 익숙하지 않은 사람들도 읽을 수 있습니다.

그럼 계속 진행하겠습니다. 당신은 가장 많은 것을 할 수 있습니다 최신 버전라이브러리 웹 사이트의 JQuery 또는 Google 깊이에 있는 별도의 파일을 사용하여 문서에 연결하고 닫는 태그 앞 섹션에 다음 줄을 배치합니다.

다음 단계에서는 채우기 및 기능을 살펴보겠습니다. 제이쿼리 플러그인, 팝업을 활성화하기 위해 코드에는 우리가 수행하는 작업을 더 잘 이해할 수 있는 몇 가지 설명이 포함되어 있습니다.

JQuery 플러그인

$(문서) . Ready(function () ( //poplight 클래스와 href 태그 속성이 있는 링크를 클릭할 때 # $("a.poplight" ) . click(function () ( var popID = $(this) . attr("rel" ) ; //창의 이름을 가져옵니다. 새 창을 추가할 때 창의 rel 속성에서 이름을 변경하는 것을 잊지 않는 것이 중요합니다. link var popURL = $(this) . attr(" href" ) ; //링크의 href 속성에서 크기 가져오기 //href url에서 쿼리 및 변수 var query= popURL.split ("?" ) ; var 희미 = query[ 1 ] .split ("&" ) ; var popWidth = 희미[ 0 ] .split ("=" ) [ 1 ] ; //쿼리 문자열의 첫 번째 값 //창에 닫기 버튼 추가 $( "#" + popID) . fadeIn() . css(( "width" : Number( popWidth ) ) ). ("#" + popID) . height() + 80 ) / 2 ; var popMargLeft = ($("# " + popID) . width() + 80 ) / 2 ; //들여쓰기 값 설정 $("#" + popID) .css(( "margin-top" : - popMargTop, "margin-left" : - popMargLeft ) ) ; //반투명하고 어두워지는 배경을 추가합니다 $("body" ) . 추가("" ) ; //div 컨테이너는 태그 앞에 배치됩니다. $("#페이드" ) . css(( "필터" : "알파(불투명도=80)" ) ) . 점점 뚜렷해지다() ; //레이어 반투명도, 어리석은 IE용 필터 return false ; ) ) ; //창을 닫고 배경을 어둡게 합니다 $(document) . on("click" , "a.close, #fade" , function () ( //창 외부를 클릭하여 닫음, 즉 배경에서... $("#fade , .popup_block" ) . fadeOut(function ( ) ( $("#fade, a.close" ) .remove() ; //부드럽게 페이드됩니다 ) ) ; return false ; ) ) ; ) ) ;

$(document).ready(function())( //poplight 클래스와 href 태그 속성이 있는 링크를 클릭할 때 with # $("a.poplight").click(function() ( var popID = $(this).attr("rel"); //창 이름을 가져오며, 창 이름을 변경하는 것을 잊지 않는 것이 중요합니다. 새 링크를 추가할 때 링크의 rel 속성에 있는 이름 var popURL = $(this).attr("href"); //링크의 href 속성에서 크기 가져오기 //href url에서 쿼리 및 변수 var 쿼리 = popURL.split("?"); var 희미한 = query.split( "&"); var popWidth = 희미한 분할("="); //쿼리 문자열의 첫 번째 값 //쿼리 문자열에 닫기 버튼을 추가합니다. window $("#" + popID).fadeIn().css(( "width": Number(popWidth) )).prepend(""); //가운데 정렬(수직 및 수평)을 위한 여백(margin) 결정 - CSS에 정의된 패딩 + 프레임 너비를 고려하여 높이/너비에 80을 추가합니다. var popMargTop = ($("#" + popID).height() + 80) / 2; var popMargLeft = ($("# " + popID).width() + 80) / 2; //들여쓰기 값 설정 $("# " + popID).css(( "margin-top" : -popMargTop, "margin-left" : -popMargLeft ) ); //반투명하고 어두워지는 배경을 추가합니다. $("body").append(""); //div 컨테이너는 태그 앞에 나열됩니다. $("#fade").css(("filter" : "alpha(opacity=80)")).fadeIn(); //레이어 반투명도, 어리석은 IE용 필터는 false를 반환합니다. ))); //창을 닫고 배경을 흐리게 합니다. $(document).on("click", "a.close, #fade", function() ( //창 외부, 즉 배경을 클릭하여 닫습니다... $( "#fade , .popup_block").fadeOut(function() ( $("#fade, a.close").remove(); //페이드 아웃 )); return false; )); )));

결론:

일반적으로, 잡초에 빠지지 않고 불필요한 코드로 인해 부담을 주지 않는다면, 우리의 멋진 모달 창이 작동할 준비가 되어 있으며, 여러분의 생각이 텍스트나 기타 유용한 정보로 번역되기를 기다리고 있습니다.
모달 창을 사용하여 비디오나 대규모 이미지를 삽입하려는 사람들에게는 와 같은 특수 플러그인을 사용하는 것이 좋습니다. 위의 모달 창 예는 그다지 무겁지 않은 정보에 더 적합하기 때문입니다. 원한다면 문제가 되지 않습니다.

다음번에는 확실히 설명하고 예를 보여드릴 것입니다. 확실히 많은 사람들이 팝업 창에서 다른 타사 개체에 대해 배우고 싶어할 것입니다. 그러니 웹에서 길을 잃지 말고 계속 지켜봐 주시기 바랍니다!

업데이트: 버전 dm-modal.js v1.3(2017년 1월 15일)
수정됨: href*=\\# 구문을 사용하여 더 이상 사용되지 않는 .live() 함수를 대체했습니다. 이제 플러그인이 최신 버전의 jQuery 라이브러리에서 작동합니다.

그게 다야! 이것이 또 다른 유용한 교훈이 되었기를 바랍니다.

존경하는 마음을 담아, 앤드류

꽤 자주 웹사이트에서 모달 창을 찾을 수 있으며, 이 창들은 모두 다양한 작업에 사용됩니다. 실제로 이는 사이트 인터페이스를 더욱 대화형이고 편리하게 만들 수 있는 매우 강력한 도구입니다. 예를 들어 모달 창은 승인 양식, 피드백 양식, 제품 주문 등 다양한 양식에 사용될 수 있지만 알 수는 없습니다.

이번 포스팅에서는 JQuery와 CSS를 사용하여 간단한 모달 창을 만드는 방법의 예를 살펴보겠습니다. 이 예제의 특징은 JQuery 라이브러리 자체를 제외하고는 필수가 아니라는 것입니다.

페이지에 모달 창 코드를 배치합니다.

닫기 모달 창 열기

마크업에서 볼 수 있듯이 모달 창 자체의 블록은 id= 속성이 있는 div입니다. modal_form id=인 범위 요소가 포함되어 있습니다. modal_close. 이 요소는 모달 창을 닫는 버튼 역할을 합니다. 또한 블록 아래에는 id= 속성이 있는 div 블록이 있습니다. 씌우다, 배경을 어둡게 하는 역할도 합니다. 모달 창은 클래스와 함께 링크로 열립니다. 모달.

모달 창용 CSS

#modal_form(너비: 300px; 높이: 300px; 테두리 반경: 5px; 테두리: 3px #000 단색; 배경: #fff; 위치: 고정; 위쪽: 45%; 왼쪽: 50%; margin-top: -150px; 여백-왼쪽: -150px; 디스플레이: 없음; 불투명도: 0; z-index: 5; 패딩: 20px 10px; ) #modal_form #modal_close (너비: 21px; 높이: 21px; 위치: 절대; 상단: 10px; 오른쪽: 10px; 커서: 포인터; 디스플레이: 블록; ) #overlay ( z-index:3; 위치: 고정; 배경색:#000; 불투명도:0.8; -moz-opacity:0.8; 필터: 알파(불투명도=80) ; 너비:100%; 높이:100%; 위쪽:0; 왼쪽:0; 커서:포인터; 표시:없음; )

을 위한 modal_form고정된 너비와 높이를 설정한 다음 위치를 화면 중앙에 맞추었습니다. 모달 창 배경( 씌우다) 화면 너비에 맞게 크기를 설정하고, 투명도로 채우고, 기본적으로 숨기기도 합니다. 함께하는 특별한 순간 Z-색인, 모달은 페이지의 모든 요소 중 가장 큰 요소를 가져야 하며, 표지는 모달 자체를 제외한 모든 요소 중 가장 큰 요소를 가져야 합니다.

이제 가장 기본적인 것은 자바스크립트 코드입니다. 모달 창에는 두 가지 주요 이벤트가 사용됩니다. 열기 - 클래스가 있는 요소 클릭 모달, 우리의 경우 이것은 링크이고 모달 창을 닫는 것은 표지를 클릭하는 것입니다( 씌우다) 또는 닫기 버튼을 클릭하세요. 우리의 경우 이는 id=인 범위 요소입니다. modal_close.

$(document).ready(function() ( $(".modal").click(function(event)( event.preventDefault(); $("#overlay").fadeIn(400, // 디스플레이에 애니메이션 적용 커버 함수 ()( // 다음으로 모드 창을 표시합니다. $("#modal_form") .css("display", "block") .animate((opacity: 1, top: "50%"), 200); )); )); // 모달 창 닫기 $("#modal_close, #overlay").click(function())( $("#modal_form") .animate((opacity: 0, top: "45% "), 200, // 투명도 감소 function())( // 애니메이션 이후 $(this).css("display", "none"); // 창 숨기기 $("#overlay").fadeOut (400); // 배경 숨기기 ) ); )); ));

애니메이션을 사용하여 수직 위치를 변경합니다. 맨 위, 투명성뿐만 아니라 불투명, 이것으로 우리는 흥미로운 효과를 얻습니다. 창을 열 때와 닫을 때 모두 비슷한 효과가 사용됩니다. 차이점은 블록에 속성이 적용되는 순서가 바뀌면서 창이 열리고 닫히는 모습이 시각화된다는 점입니다.

모달 창은 현대 웹 디자인의 필수적인 부분입니다. 이를 통해 개발자는 방문자를 보조 페이지로 리디렉션하지 않고 한 페이지를 반복하는 방법을 사용할 수 있습니다. 이 튜토리얼에서는 jQuery와 CSS3를 사용하여 웹사이트에 배경이 흐릿한 멋진 모달 창을 만드는 방법을 살펴보겠습니다. 이러한 규칙 덕분에 우리는 창이 나타날 때 흐린 배경을 만들어 방문자의 시선을 사이트의 필요한 정보에만 묶을 것입니다.

CSS3에서 배경이 흐린 모달 창

최고의 경제 뉴스는 여기에 있습니다: Drobakha

창 애니메이션은 표시되는 버튼을 클릭하면 창이 위에서 아래로 애니메이션되고 배경 흐림이 자동으로 증가하는 방식으로 설정됩니다.

1단계. HTML

제목, 설명을 포함하는 컨테이너가 있고 모달 창을 열 수 있도록ggleModal 클래스가 있는 버튼에 대한 클래스를 추가합니다.

표제

설명

창의 기사 제목 열기

탭은 웹 사이트를 만들 때 매우 흥미롭고 편리한 기능으로 정보를 적절하게 정리하는 동시에 사이트 공간을 절약할 수 있습니다.

닫다

그런 다음 모달 is-active 클래스를 추가해야 합니다. 이 클래스는 모달 창 호출을 담당하고, modal__header는 창 제목과 스타일을 담당합니다.

2단계: CSS

이제 스타일 지정으로 넘어가겠습니다. 첫 번째 단계는 버튼 클래스입니다. 추측한 대로 사이트의 버튼을 담당하고 이에 대한 올바른 표시 매개변수를 설정합니다.

버튼( 배경: 없음; 배경 클립: 패딩 상자; 디스플레이: 인라인 블록; 테두리: 0; 사용자 선택: 없음; -webkit-touch-callout: 없음; -webkit-appearance: 버튼; -webkit-user -select: 없음; -moz-user-select: 없음; -ms-user-select: 없음; )

컨테이너( 위치: 상대; 여백:0 자동; 최대 너비: 960px; 상자 크기: 테두리 상자; 패딩 상단: 40px; )

기사( 배경: #fff; 패딩: 20px; margin-bottom: 40px; border-radius: 5px; ) .modal( 디스플레이: 없음; 위치: 고정; 상단: 50%; 너비: 100%; 높이: 자동; 여백 -top: -150px; 배경색: $color-white; 테두리 반경: 3px; z-색인: 999; 상자 그림자: 0px 1px 3px 0px darken($color-bg, 10%); @media #( $small) ( 왼쪽: 50%; margin-left: -260px; 최대 너비: 520px; ) &.is-active ( 디스플레이: 블록; 애니메이션: 1s 선형 슬라이드; ) .inner ( 위치: 상대; 패딩: 20px ; ) .modal__header ( border-bottom: 1px solid darken($color-bg, 5%); ) .modal__footer ( text-align: center; 버튼 ( 디스플레이: inline-block; ) )

스타일은 매우 간단하며 저장됩니다. 별도의 파일 CSS를 한 번 이상 접한 개발자를 위해 편집할 때 어려움을 겪어서는 안 됩니다.

3단계. JS

마지막이지만 덜 중요한 것은 메뉴가 나타날 때 자동 배경 흐림과 링크 클릭 가능성을 설정하는 것입니다. 작은 JS 규칙이 이에 도움이 됩니다.

$("body").addClass("흐려짐"); $(".toggleModal").on("클릭", 함수(이벤트) ( event.preventDefault(); $(".modal").toggleClass("is-active"); $("body").toggleClass ("흐릿함"); ));

그 결과 보는 사람의 눈을 즐겁게 하고 디자인을 어지럽히지 않는 멋진 모달 창이 탄생했습니다.

3. 링크에서 호출된 jQuery 모달 창의 예(데모)

아마도 인터넷에서 등록 확인, 경고, 팝업 모달 창을 두 번 이상 본 적이 있을 것입니다. 참고정보, 파일 다운로드 등이 있습니다. 이 튜토리얼에서는 가장 간단한 모달 창을 만드는 방법에 대한 몇 가지 예를 제공합니다.

간단한 팝업 모달 창 만들기 즉시 나타나는 간단한 모달 창에 대한 코드를 살펴보겠습니다.
jQuery 코드

$(문서).ready(함수()
{
Alert("팝업창의 텍스트");
});

페이지 본문 아무 곳에나 코드를 붙여넣으세요. 아무 명령 없이 페이지가 로드된 직후 다음과 같은 창이 표시됩니다.

그러나 다음 코드는 전체 페이지가 브라우저에 로드된 후에 실행됩니다. 이 예에서는 이미지가 포함된 페이지를 로드한 후 간단한 팝업 창이 나타납니다.

$(창).로드(함수()
{
Alert("페이지 로딩이 완료되었습니다!)");
});

CSS를 사용하여 링크에서 jQuery 모달 창 호출 다음 단계는 링크를 클릭할 때 모달 창을 만드는 것입니다. 배경이 서서히 어두워집니다.

이러한 창에 로그인 및 등록 양식이 있는 것을 종종 볼 수 있습니다. 사업을 시작하자

먼저 html 부분을 작성해 보겠습니다. 이 코드를 문서 본문에 배치합니다.

모달 창 호출

모달 창 텍스트
닫다
모달 창의 텍스트입니다.

CSS 코드. 별도의 CSS 파일이나 헤드에 있습니다.

몸 (
글꼴 계열:verdana;
글꼴 크기:15px;
}
.link(색상:#fff; 텍스트 장식:없음)
.link:hover (색상:#fff; 텍스트 장식:밑줄)
#마스크 (
위치:절대;
왼쪽:0;
상단:0;
Z-색인:9000;
배경색:#000;
디스플레이:없음;
}
#boxes.window (
위치:절대;
왼쪽:0;
상단:0px;
-상단: 40px;
너비:440px;
높이:200px;
디스플레이:없음;
Z-색인:9999;
패딩: 20px;
오버플로: 숨김;
}
#상자 #대화상자(
너비:375px;
높이:203px;
패딩:10px;
배경색:#ffffff;
}
.맨 위(
위치:절대;
왼쪽:0;
상단:0;
너비:370px;
높이:30px;
배경: #0085cc;
패딩: 8px 20px 6px 10px;
}
.닫다(
플로트:오른쪽;
}
.콘텐츠(
패딩 상단: 35px;
}

jQuery 코드에서는 모달 창과 마스크의 위치에 초점을 맞추겠습니다. 이 경우에는 배경이 점진적으로 어두워집니다.

주목! 문서 헤드에 라이브러리를 포함시키는 것을 잊지 마세요!

Google 웹사이트에서 도서관을 연결합니다. 음, jQuery 코드 자체입니다.

jQuery 코드

$(문서).ready(함수() (
$("a").click(함수(e) (
e.preventDefault();
var id = $(this).attr("href");
var 마스크 높이 = $(document).height();
var 마스크Width = $(window).width();
$("#mask").css(("너비":maskWidth,"높이":maskHeight));
$("#mask").fadeIn(1000);
$("#mask").fadeTo("느린",0.8);
var winH = $(window).height();
var winW = $(window).width();
$(id).css("top", winH/2-$(id).height()/2);
$(id).css("왼쪽", winW/2-$(id).width()/2);
$(id).fadeIn(2000);
});
$(".window .close").click(함수 (e) (
e.preventDefault();
$("#mask, .window").hide();
});
$("#mask").click(함수 () (
$(this).hide();
$(".window").hide();
});
});