그런 다음 클래스를 추가해야 합니다. 모달 활성, 이 클래스는 모달 창 호출을 담당합니다. modal_header창의 제목과 스타일을 담당합니다.

2단계: CSS

이제 스타일링으로 넘어 갑시다. 첫 번째 단계는 클래스입니다. 단추,책임이있을 것입니다. 사이트의 버튼에 대해 올바른 표시 매개 변수를 설정합니다.

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

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

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

스타일은 매우 간단하며 별도의 파일에 저장되며 CSS를 만난 적이 있는 개발자를 위해 편집할 때 어려움을 일으키지 않습니다.

3단계JS

마지막이지만 덜 중요한 것은 메뉴가 나타날 때 배경이 자동으로 흐려지는 것과 링크의 클릭 가능성, 작은 규칙이 도움이 될 것입니다. JS:

$("본문").addClass("흐리게 표시됨"); $(".toggleModal").on("클릭", 함수(이벤트) ( event.preventDefault(); $(".modal").toggleClass("활성 상태"); $("본체").toggleClass ("흐리게 처리됨"); ));

결과적으로 방문자의 눈을 즐겁게 하고 디자인을 어지럽히지 않는 멋진 모달 창을 얻을 수 있습니다.

1. jQuery "Simple Modal Box"의 모달 창

2. jQuery 플러그인 "LeanModal"

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

3. jQuery 플러그인 "ToastMessage"

팝업 메시지. 두 가지 버전의 플러그인. 어떤 경우에는 메시지가 저절로 사라지고 두 번째 구현에서는 메시지를 닫으려면 버튼을 클릭해야 합니다.

4. 모달 창에 팝업되는 콘텐츠

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

5. 예쁜 대화 상자

데모 페이지에서 십자가를 클릭하면 플러그인이 작동하는 모습을 볼 수 있습니다.

6. Mootools 모달 창, MooDialog 플러그인

7. 화면 상단의 jQuery 팝업 바

8.제이쿼리 팝업

팝업 창에 연락처 양식을 표시하기 위한 jQuery 플러그인.

10. Facebook 대화 상자를 구현하기 위한 MooTools "LightFace" 플러그인

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

11. jQuery 모달 창

깔끔한 jQuery 팝업 대화 상자.

12. jQuery 모달

멋진 모달 팝업. 세 가지 스타일. 데모 페이지에는 창을 호출할 수 있는 3개의 링크가 있습니다.

13. jQuery 모달

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

15. 페이지 상단의 팝업 메시지

메시지는 페이지 상단에 표시되고 차례로 흐리게 표시됩니다. 팝업 메시지를 보려면 데모 페이지에서 "나를 클릭하십시오" 레이블을 클릭하십시오. 십자가를 클릭하면 닫힙니다. jQuery로 구현했습니다.

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

팝업 및 페이지 새로고침을 사용하지 않고 최신 모달 대화 상자를 구현합니다. 데모 페이지에서 "데모 시작" 버튼을 클릭하여 스크립트가 어떻게 작동하는지 확인하십시오.

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

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

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

그것을 하는 방법을 보자:

HTML

다음 속성을 가진 태그를 추가하는 것으로 시작하겠습니다.

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

< a href= "#?w=500" rel= "popup_name" class = "poplight" >작동 중인 창 보기 - 너비 = 500px

작동 중인 창 보기 - 너비 = 500px

다음으로 팝업에 대한 인라인 마크업을 생성해야 합니다. 콘텐츠 하단과 같이 페이지의 아무 곳에나 배치할 수 있습니다. 팝업 ID는 속성과 일치합니다. 상대꼬리표
이렇게 하면 링크와 팝업이 함께 연결됩니다.

그래서 우리는 페이지에서 창의 위치를 ​​​​알아 냈습니다. 이제 스타일을 사용하여 장식하고 적절한 모양을 만들어 봅시다.

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 ; 상자 그림자 : 0px 0px 20px #000 ; /*--CSS3 모서리 라운딩--*/-웹킷 테두리 반경: 12px ; -moz-테두리 반경: 12px ; 테두리 반경 : 12px ; ) .popup_block p ( font-weight : 400 ; padding : 0 ; margin : 0 ; color : #000 ; line-height : 1.6 ; ) .popup_block h2 ( margin : 0px 0 10px ; color : rgb (43 , 43 , 43 ) ) ; 글꼴 두께: 400 ; 텍스트 정렬: 가운데 ; 텍스트 그림자: 1px 1px 2px #0D0C0C ; ) /* 닫기 버튼을 구성 */.close ( background-color : rgba (61 , 61 , 61 , 0.8 ) ; border : 2px solid #ccc ; height : 25px ; line-height : 20px ; position : absolute ; right : -17px ; font-weight : bold ; text-align : center , text-decoration : 없음 , padding : 0 , top : -17px , width : 25px , -webkit-border-radius: 50% , -moz-border-radius: 50% , -ms-border- 반경: 50% ; -o-border-radius: 50% ; 테두리 반경: 50% ; -moz-box-shadow: 1px 1px 3px #000 ; -webkit-box-shadow: 1px 1px 3px #000 ; box- shadow : 1px 1px 3px #000 ; ) .close : before ( color : rgba (255 , 255 , 255 , 0.9 ) ; 내용 : "X" ; font-size : 12px ; text-shadow : 0 -1px rgba (0 , 0 , 0 , 0.9 ) ; ) .close : hover ( background-color : 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 ; 패딩: 0 ; ) /*--IE6의 고정 위치--*/* html #fade ( 위치 : 절대 ; ) * html .popup_block ( 위치 : 절대 ; )

#fade ( 디스플레이: 없음;/*--기본적으로 숨김--*/ 배경: rgba(7, 87, 207, 0.8); 위치: 고정; 왼쪽: 0; 상단: 0; 너비: 100%; 높이: 100%; 불투명도: .80; Z-색인: 9999; ) .popup_block ( 표시: 없음; /*--기본적으로 숨김--*/ 배경: #fff; 패딩: 20px; 테두리: 8px solid rgb(134, 134, 134), 부동 소수점: 왼쪽, 글꼴 크기: 85%, 위치: 고정, 위쪽: 50%, 왼쪽: 50%, 색상: #000, 최대 너비: 750픽셀, 최소 너비: 320픽셀, 높이: 자동 ; Z-색인: 99999; /*--CSS3 box-shadow--*/ -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 ( font-weight: 400 ; 패딩: 0; 여백: 0; 색상: #000; 라인 높이: 1.6;) : 센터; 텍스트 그림자: 1px 1px 2px #0D0C0C; ) /* 닫기 버튼을 형성 */ .close ( backgro 무색: rgba(61, 61, 61, 0.8); 테두리: 2px 솔리드 #ccc; 높이: 25px; 줄 높이: 20px; 위치: 절대; 오른쪽: -17px; 글꼴 두께: 굵게; 텍스트 정렬: 가운데; 텍스트 장식: 없음, 패딩: 0, 상단: -17px; 너비: 25px -웹킷 테두리 반경: 50%; -moz-border-radius: 50%; -ms-테두리-반경: 50%; -o-border-radius: 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 ( background-color: 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 페이지, 태그 사이 그리고, 또는 스타일의 별도 파일(일반적으로 이 파일)에 넣을 수 있습니다. 스타일.css, 또는 이와 유사한 것.

제이쿼리 설정

모달 창의 전체 작동을 위해서는 이 라이브러리의 작업에 익숙하지 않은 jQuery를 연결해야 하므로 읽을 수 있습니다.

계속 진행하겠습니다. 당신은 가장 할 수 있습니다 최신 버전라이브러리 웹 사이트의 jQuery 또는 Google 창자에서 호스팅되는 별도의 파일을 사용하여 문서에 연결, 닫는 태그 앞 섹션이 줄을 배치하여:

다음 단계에서는 채우기 및 기능을 고려하십시오. 제이쿼리 플러그인, 팝업 창을 활성화하기 위해 코드에는 우리가 하는 일을 더 잘 이해할 수 있도록 몇 가지 설명이 포함되어 있습니다.

제이쿼리 플러그인

$(문서) . 준비(함수()() //팝라이트 클래스와 태그의 href 속성이 있는 링크를 클릭할 때 와 함께 #$("a.poplight" ) . click(함수() ( var popID = $(this) . attr("rel" ) ; //창의 이름을 얻습니다. 새 창을 추가할 때 링크의 rel 속성에서 이름을 변경하는 것을 잊지 않는 것이 중요합니다. var popURL = $(this) . 속성("href") ; // 링크의 href 속성에서 크기 가져오기 // href url의 요청 및 변수 varquery=popURL. 나뉘다("?"); var dim= 쿼리[ 1 ] . 나뉘다("&"); var popWidth = 희미한[ 0 ] . 분할("=") [ 1 ] ; //첫 번째 쿼리 문자열 값 // 창에 닫기 버튼 추가$("#" + popID) . 점점 뚜렷해지다() . CSS(( "너비": 숫자( popWidth ) ) ) . 앞에 추가( "" ) ; //중앙 정렬을 위한 여백(여백) 결정(수직 및 수평) - CSS에 정의된 패딩 + 테두리 너비를 포함하여 높이/너비에 80을 추가합니다. var popMargTop = ($("#" + popID) . 높이() + 80 ) / 2 ; var popMargLeft = ($("#" + popID) . 너비() + 80 ) / 2 ; // 들여쓰기 양 설정$("#" + popID) . css(( "margin-top" : - popMargTop, "margin-left" : - popMargLeft ) ) ; // 반투명 음영 배경 추가$("본체") . 추가(" " ) ; //div 컨테이너는 태그 앞에 작성됩니다.. $("#페이드" ) . CSS(( "필터": "알파(불투명도=80)" ) ) . 점점 뚜렷해지다() ; // 레이어 반투명, 벙어리 IE용 필터반환 거짓 ; ) ) ; //창을 닫고 배경을 어둡게 한다.$(문서) . on("클릭" , "a.close, #fade" , 함수() ( // 창 외부를 클릭하면 닫힙니다. 백그라운드에서...$("#페이드 , .popup_block" ) . fadeOut(함수() ( $("#fade, a.close" ) . remove() ; // 사라지다) ) ; 반환 거짓 ; ) ) ; ) ) ;

$(document).ready(function()( //팝라이트 클래스와 href 태그 속성이 있는 링크를 클릭할 때 c # $("a.poplight").click(function() ( var popID = $(this).attr("rel"); // 창 이름을 가져옵니다. 이름을 변경하는 것을 잊지 않는 것이 중요합니다. 새로운 것을 추가할 때 링크의 rel 속성에서 var popURL = $(this).attr("href"); //링크의 href 속성에서 크기를 가져옵니다 //쿼리와 href url에서 변수를 가져옵니다 var query= popURL.split( "?"); var dim= query.split( "&"); var popWidth = dim.split("="); //첫 번째 쿼리 문자열 값 //창에 닫기 버튼 추가 $("#" + popID).fadeIn().css(( "width": Number(popWidth) )).prepend(""); //중앙 정렬을 위한 여백(여백) 정의(수직 및 수평) - 높이에 80을 추가합니다. /css에 정의된 패딩 + 테두리 너비를 포함한 너비 var popMargTop = ($("#" + popID).height() + 80) / 2; var popMargLeft = ($("#" + popID).width() + 80 ) / 2; //패딩 양 설정 $("# " + popID).css(( "margin-top" : -popMargTop, "margin-left" : -popMargLeft )); //반투명 블랙아웃 배경 추가 $("본문").append("

"); //div 컨테이너는 태그 앞에 기록됩니다.. $("#페이드").css(("필터": "알파(불투명도=80)")).fadeIn(); //레이어 반투명도, 어리석은 IE에 대한 필터 return 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 라이브러리

그게 다야! 또 유익한 강의를 듣길 바랍니다.

모든 존경과 함께 앤드류