간단한 팝업창 CSS. CSS에서 모달 창을 만드는 방법. jQuery 플러그인 "ToastMessage"

CSS를 사용하여 모달 창 만들기에 대한 기사에서 모달 창이 무엇인지, 왜 필요한지 살펴보았습니다. CSS만을 사용하여 창도 만들었습니다. 이번 글에서는 자바스크립트 모달 창을 만드는 방법을 설명하겠습니다. 보다 구체적으로, 우리는 jquery 라이브러리를 사용하여 생성할 것입니다.

이제 jquery에서 모달 창을 만들어 보겠습니다. 문제를 복잡하게 만들기 위해 다음 조건을 설정해 보겠습니다. 반응형 모달 창을 만들어야 합니다. 그리고 적응성은 화면 크기가 감소하면 창도 감소한다는 사실로 구성됩니다. HTML 마크업을 사용하여 적응형 jquery 모달 창을 만들어 보겠습니다.

여기를 클릭하세요! X 통화 요청

코드로 모든 것이 명확하다고 생각합니다. 우리 사이트의 콘텐츠가 있는 래퍼.래퍼(wrapper.wrapper)가 있습니다. ID가 gowindow인 모달 창, ID가 modal_window인 창 자체 및 오버레이 레이어 myoverlay를 호출하기 위한 버튼이 있습니다. 이제 CSS 스타일을 작성해 보겠습니다.

래퍼( 너비: 100%; 여백: 자동; 너비: 자동;/*100%와 동일*/ max-width: 960px;/*최대 래퍼 너비*/ border: 1px solid #000; background-color: # F5F9FB; ) .button( /*-------*/ ) #modal_window ( width: 34%;/*응답성*/ height: 300px; border-radius: 10px; border: 3px #fff solid; background : # e0e0e0; margin-top: -30%; margin-left: 33%; 표시: 없음; 불투명도: 0; /*애니메이션의 전체 투명도 */ z-index: 5000; /*창은 최상위 레이어여야 합니다*/ 패딩 -상단: 20px; 텍스트 정렬: 중앙; 위치: 상대; ) #modal_window #window_close ( 너비: 21px; 높이: 21px; 위치: 절대; 상단: 10px; 오른쪽: 10px; 커서: 포인터; 디스플레이: 블록; ) #myoverlay ( z-index: 3000; /*모든 레이어 위, 창 아래 */ 위치: 고정; /*사이트 겹침*/ background-color: #000; 불투명도: 0.5; 너비: 100%; 높이: 100%; /*전체 화면 */ 위쪽: 0; 왼쪽: 0; 커서: 포인터; 디스플레이: 없음; )

CSS 코드를 설명하겠습니다. block.wrapper를 적응형으로 설정했습니다. 화면 크기에 따라 변경되지만 960px 이하입니다. 버튼 코드는 표시하지 않겠습니다. #modal_window 창의 너비를 백분율로 설정했으며 너비는 .wrapper의 너비에 따라 달라집니다. 창을 중앙에 맞추려면 여백을 33%로 설정하세요. 50%-17%로 계산됩니다. 여기서 17%는 창 너비의 절반입니다. 속성 표시: 없음 및 불투명도: 0을 사용하여 창을 숨깁니다. #window_close 및 #myoverlay 코드를 사용하면 모든 것이 명확하다고 생각합니다. 이제 jquery 코드를 작성해 보겠습니다. jqery가 이미 연결되어 있다고 가정하겠습니다.

$(document).ready(function() ( $("#gowindow").click(function())(//버튼 클릭 $("#myoverlay").fadeIn(400, //오버레이 레이어 표시 function() ( $("#modal_window") .css("display", "block") //창을 보이게 만듭니다.animate((opacity: 1, top: "50%"), 200); //증가 투명도, 창이 부드럽게 밖으로 이동합니다 )); )); /* 창 제거 */ $("#window_close, #myoverlay").click(function())( //겹치는 레이어를 클릭하거나 $를 교차합니다. ("#modal_window") .animate((opacity : 0, top: "45%"), 200, //투명도가 켜져 있으면 창이 올라갑니다. function())( $(this).css("display", "none"); //창을 보이지 않게 만듭니다. $("# myoverlay").fadeOut(400); //중첩 레이어 제거 )); )); ));

Js 코드는 제가 주석을 꽤 잘 달았기 때문에 설명이 필요 없을 것 같습니다. 제 생각에는 그게 전부입니다. 요약해 보겠습니다. 간단한 jquery 반응형 모달 창을 만들었습니다.

여러분, 안녕하세요. 얼마 전 블로그 통계를 주의 깊게 살펴본 결과 모달 창을 만드는 예가 인터넷 작업자에게도 큰 관심을 끌고 있음을 발견했습니다. 가장 인기 있는 솔루션은 자바스크립트를 사용하지 않고 순수 .
작업하는 동안 나는 많은 흥미로운 솔루션을 축적했으며, 이를 내 블로그 페이지의 자세한 기사에서 여러 번 자세히 설명했지만 이러한 교훈 중 상당수는 시간이 지남에 따라 배경으로 사라졌습니다. 블로그 독자들은 때때로 탐색하기가 어렵다고 느끼며, 효과적인 모달 창과 팝업 양식을 만드는 대부분의 효과적인 방법은 눈에 띄지 않습니다.
따라서 이번 호에 대한 사용자의 관심을 고려하여 이 주제에 대한 모든 강의와 예제를 결합하고 모달 창 및 양식 모음을 별도의 기사에 표시하기로 결정했습니다. 그 결과 간단한 설명, 예제 및 기사에 대한 링크가 포함된 간단한 개요가 제공됩니다. 그러니 보고, 연구하고, 누군가 솔루션이 마음에 든다면 자유롭게 소스 코드를 가져와 만들고, 만들고, 만들고...

내 블로그 독자들 사이에서 모달 창을 만드는 가장 인기 있는 방법입니다. 구현이 매우 쉽습니다. 팝업 블록의 모양과 모든 기능은 Javascript 및 추가 그래픽 요소를 포함하지 않고 CSS3만을 기반으로 합니다.
거의 모든 웹사이트에 모달 창을 연결하고 표시하는 기능. HTML 프레임을 올바른 위치에 올바르게 배치하고, 필요한 콘텐츠를 추가하고, 스타일을 연결하고, 전체 항목을 활성화 버튼이나 사이트의 다른 요소(그림, 메뉴 항목, 링크, 단일 단어)에 연결하는 것으로 충분합니다. 텍스트 등) 그게 다입니다. 준비가 완료되었습니다.

간단한 텍스트, 그림, 다양한 형식 또는 삽입된 비디오 등 모든 정보가 포함된 모달 창 표시를 웹사이트에 빠르고 쉽게 구현할 수 있는 매우 간단하고 가벼운 jQuery 플러그인입니다.
모양은 CSS를 사용하여 구성되며 창 크기는 링크의 href="#?w=500" 속성에서 직접 설정됩니다. 여기서 #?w=500은 필요한 창 너비를 나타냅니다. 그러나 수업의 세부 사항을 공부하면 모든 것이 매우 명확해질 것입니다. 이 솔루션이 작동하려면 사이트에 연결된 jQuery 라이브러리가 필요합니다.

처음에는 콘텐츠가 포함된 블록 요소의 절대적인 중앙 집중화에 대한 수업이 생각되었지만 이에 대해 너무 많은 내용이 작성되어 적응성으로 주제를 희석하고 CSS 도구만 사용하여 모달 창에 모든 것을 오버레이하기로 결정했습니다. 수업을 공부하면 결과가 무엇인지 알 수 있습니다.

팝업(모달) 창을 구현하는 아주 새로운 방법입니다. 나는 종종 드롭다운 정보 블록이나 ""를 만들기 위해 숨겨진 체크박스를 사용했습니다. 결과적으로 모든 것이 매우 간단해졌으며 CSS3와 HTML5의 구문 기능을 사용하면 모달 창 작업을 쉽게 구성할 수 있습니다. 저는 디자인에 너무 집중하지 않았습니다(그게 전부는 아닙니다). 저는 부트스트랩 정보 블록의 예를 출발점으로 삼았습니다. 이 방법은 모든 최신 브라우저에서 완벽하게 작동하지만 IE의 이끼 낀 버전에 갇힌 사용자는 불행하게도 그냥 지나쳐 버립니다.

javascrip 없이 CSS3만을 사용하여 모달 블록에서 비디오 보기를 구성하는 주제가 나를 괴롭힙니다. 아니요, 모달 창의 비디오 출력에는 문제가 없습니다. 창을 닫을 때 비디오를 중지하는 적절하고 만족스러운 솔루션을 찾을 수 없습니다. 저는 어리석게도 빈 href="" 속성이 있는 링크를 사용했습니다. 이 정결하지 않은 방법은 많은 숙련된 장인을 잠든 상태로 만들었지만 현재로서는 아직 더 효과적이고 유효한 다른 솔루션을 찾지 못했습니다.

저는 그림뿐 아니라 텍스트에 대해서도 모달 창 안에 일종의 슬라이더를 삽입할 수 있는지 자주 질문을 받았습니다. 왜 안 돼. 부르주아지는 모든 매개변수에 적합한 간단한 콘텐츠 로테이터를 찾았으며, 남은 것은 이를 기성 모달 창과 결합하는 것뿐이었습니다. 그리고 결국 일어난 일은 일어난 일이었습니다 :)). 보세요, 모든 것이 구현하기 매우 간단합니다.

많은 사이트에서는 팝업 피드백 양식, 등록 및 로그인 양식을 사용합니다. 가장 쉬운 방법은 기성 모달 창에 작업 양식을 포함시키는 것입니다. 위에 제시된 모달 창의 모든 버전인 CSS3에 배치된 꽤 괜찮은 형식을 취하면 남은 것은 이 두 요소를 단일 메커니즘으로 결합하는 것뿐입니다. 어떻게 하나요? 이것이 바로 제시된 강의에서 자세히 설명하는 내용입니다.

사용자가 페이지나 개별 사이트(블로그) 게시물에서 메시지를 보낼 수 있는 좋은 기회는 별도의 모달 문의 양식입니다. PHP 핸들러를 양식에 올바르게 첨부하고 필요한 페이지 본문에 배치하기만 하면 됩니다. 정기적으로 메일함을 확인하기만 하면 됩니다. 이 방법은 버전 9부터 Chrome, Firefox, Opera, Safari 등 모든 최신 브라우저와 Internet Explorer에서도 올바르게 작동합니다. 양식 자체에는 CSS3 매직을 사용하는 모달 창 기능이 탑재되어 있습니다.

라이트박스는 일종의 모달 창이라거나, 확대나 전체 크기의 이미지를 보는 데 주로 사용되지만 작동 원리는 거의 동일합니다. 한때 저는 CSS3만을 사용하여 어느 정도 적응형 라이트박스 버전을 만들기로 결정했습니다. 예제를 보고 여기서 나온 내용을 확인할 수 있으며, 주제가 관련이 있으면 수업을 공부하세요. 불행하게도 IE 8 이하 버전에 푹 빠진 사용자는 아무 것도 볼 수 없습니다. 이 방법은 pseudo-class:target 사용을 기반으로 합니다.

(제 생각에는) 사이트에 대해 원래 디자인된 별도의 팝업 문의 양식을 만드는 흥미로운 솔루션입니다. 양식은 onclick 이벤트 처리를 기반으로 작동합니다. 우편봉투 형태의 원본 이미지를 활용하여 디자인합니다. 이 양식은 모든 브라우저에서 빠르고 정확하게 작동하므로 사용자와 상호 작용하는 수단의 훌륭한 예입니다.

다른 많은 사람들과 마찬가지로 저 역시 사이트가 처음 로드될 때 다양한 팝업 창에 의해 멈춰 있습니다. 나는 이 방법이 너무 침해적이라고 생각한다. 하지만 이 기능은 수요가 많고 널리 사용되고 있으므로 전체 기능이 어떻게 작동하는지 살펴볼 가치가 여전히 있을 것입니다. 모든 최신 브라우저는 사이트 로딩 초기 단계에서 다양한 종류의 팝업 창을 의심하여 ​​단순히 차단합니다. 제시된 강의에서는 이 차단을 우회하는 방법을 자세히 설명하고, 사용자가 사이트를 처음 방문할 때 또는 특정 간격으로 창이 한 번 표시되도록 쿠키를 올바르게 사용하는 방법도 배우게 됩니다.

아마 그게 전부일 것입니다. 물론 숨김에 모달 창을 만들기 위한 몇 가지 다른 작업 옵션이 있지만 인터넷에는 너무 많아서 필요한 것을 찾는 것이 가장 중요합니다. 이 선택이 내 블로그의 수많은 기사에서 주제를 탐색하는 데 도움이 되기를 바랍니다. 발굴이 성공하고 유실된 자료가 발견되면 리뷰가 업데이트될 예정입니다.

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

모달 창은 링크를 클릭하면 팝업되어 일부 정보를 제공하는 컨테이너입니다. 이미 많은 분들이 익숙하실 거라 생각합니다만, 그렇지 않다면 데모 버전을 보시고 그것이 무엇인지 이해해 보세요. 이제는 엄청난 수가 있으며 각각은 자체 방식으로 작동합니다. 예를 들어, 이 예에서는 확인과 같은 몇 가지 작업을 수행하도록 요청하는 완전히 표준적인 작업이 있습니다. 또는 예를 들어 사이트를 처음 방문할 때 소셜 네트워크 그룹에 대한 다양한 구독과 관련된 또 다른 옵션이 있습니다. 인터넷에 모달 창이 있습니다 CSS, 음, 나는 이 몫을 갖고 싶습니다 자바스크립트, 더 흥미롭고 모든 브라우저에서 잘 작동하기 때문입니다.

1단계. 자바스크립트 코드.

모달 창을 시작하려면 값을 함수에 전달해야 합니다. 창.온로드. 여기서는 두 개의 식별자 요소를 전달합니다. ㅏ" 그리고 " 비".

//id "a" 및 "b"로 요소 전달 window.onload = function() ( a = document.getElementById("a"); b = document.getElementById("b"); )

그런 다음 " 쇼A", 이는 모달 창을 표시하고 요소로 전달됩니다." ㅏ" 그리고 " 비"스타일, 즉 링크를 클릭하지 않은 경우 창의 투명도, 너비 및 차단을 설정합니다." 열려 있는".

//"showA" 함수의 창 표시 function showA() ( //투명도를 설정하고 //요소 "b"의 표시를 차단합니다. b.style.filter = "alpha(opacity=80)"; b.style. 불투명도 = 0.8; b .style.display = "block"; // 차단 및 상단 패딩을 //"a" 요소의 200px로 설정 a.style.display = "block"; a.style.top = "200px "; )

모달 창을 연 후에는 나중에 어떻게든 닫거나 숨겨야 합니다. 이를 위해 " hideA"모달 창을 숨기고 요소에 대해 스타일을 할당합니다" ㅏ" 그리고 " 비".

//"a" 및 "b" 요소에 대한 창을 숨기는 //"hideA" 함수 호출 함수 hideA() ( b.style.display = "none"; a.style.display = "none"; )

전체 코드.

//id "a" 및 "b"로 요소 전달 window.onload = function() ( a = document.getElementById("a"); b = document.getElementById("b"); ) //함수 창 표시 " showA" 함수 showA() ( //투명도를 설정하고 //요소 "b"의 표시를 차단합니다. b.style.filter = "alpha(opacity=80)"; b.style.opacity = 0.8; b.style. display = " block"; // 차단 및 위쪽 여백을 // "a" 요소의 200px로 설정합니다. a.style.display = "block"; a.style.top = "200px"; ) //"를 호출합니다. //요소 "a" 및 "b"에 대한 창을 숨기는 hideA" 함수 hideA() 함수 ( b.style.display = "none"; a.style.display = "none"; )

2단계. HTML 코드.

열려 있는

태그에서 "div"식별자 "를 나타냅니다. ㅏ", 스타일과 상호 작용합니다. CSS그리고 코드로 자바스크립트. 다음으로 다른 태그를 추가합니다. div" 그리고 식별자를 부여하세요 " 창문들"는 모달 창 컨테이너 내에서 마크업 역할을 합니다.

내부에는 " 닫다"모달 창, 스타일도 지정하세요" 페이지" 그리고 기본 스타일을 지정하세요 " 플로트: 오른쪽" 즉, 오른쪽 상단에 모달 창을 닫는 링크가 표시됩니다.

닫다

식별자를 등록합니다 " 비"를 선택하면 창이 숨겨집니다.

전체 코드.

열기 닫기

3단계. CSS 코드.

필수 스타일 CSS, 그렇지 않으면 모달 창이 올바르게 작동하지 않거나 오히려 작동하지 않거나 정보가 전혀 올바르게 표시되지 않습니다.

따라서 위치와 관련된 첫 번째 필수 스타일은 이 예에서 다음과 같습니다. 결정된. 채우기 테두리로 제한하면서 모달 창을 표시할 수 있습니다. 사용하여 Z-색인링크를 클릭한 후 모달 창이 식별되는 정도를 지정합니다." 열려 있는", 그리고 " 닫다". 또한 디스플레이: 없음, 링크를 클릭할 때까지 모달 창을 숨길 수 있습니다.

#b ( 위치: 고정; 위쪽:0; 왼쪽:0; 오른쪽:0; 아래쪽:0; 표시: 없음; 배경: 회색; z-색인:1; ) #a ( 테두리: 1px 단색 검정색; 위치: 고정 ; 배경: #eff7ff; z-index:3; 디스플레이: 없음; ) #windows ( 패딩: 5px; 너비: 500px; 높이: 300px; 테두리: 2px 단색 파란색; ) a.pages ( 배경: #97cdff; 색상: 흰색; 패딩: 4px; 텍스트 장식: 없음; ) a:hover.pages ( 배경: 빨간색; 색상: 흰색; 패딩: 4px; 텍스트 장식: 없음; )

관심을 가져주셔서 정말 감사드립니다!

모달, 오버레이, 대화 상자 등 무엇이라고 부르든 이제 이 UI 패턴을 다시 생각해 볼 때입니다. 처음 등장했을 때 모달은 사용자 인터페이스 문제에 대한 우아한 솔루션이었습니다. 첫째, 사용자 인터페이스를 단순화합니다. 둘째, 화면 공간을 절약합니다. 그 이후로 디자이너들은 모달을 쉽게 수용했으며 일부는 모달을 극단적으로 채택했습니다. 모달은 무서운 팝업 창의 오늘날 버전이 되었습니다. 사용자는 모달 창을 귀찮게 여기며 본능적으로 자동으로 창을 닫는 방법을 배웠습니다.

모달 창은 기본 응용 프로그램 창 위에 있는 요소입니다. 기본 창을 차단하지만 하위 모달 창 뒤에는 표시됩니다. 사용자는 상위 애플리케이션으로 돌아가기 전에 모달 창과 상호 작용해야 합니다. — 위키피디아

필요할 때마다 모달 창을 사용할 수 있습니다.

더 중요한 것에 주의를 끌기 위해 사용자의 현재 작업을 중단하고 싶을 때 사용합니다.

사용자로부터 정보를 얻고 싶을 때 사용합니다. 예를 들어 등록 및 승인 양식이 있습니다.

상위 페이지의 컨텍스트를 잃지 않고 추가 정보를 표시하려는 경우 사용합니다. 예를 들어 더 큰 이미지나 비디오를 표시합니다.

상위 페이지와 직접적으로 관련되지 않은 정보나 다른 페이지와 "독립적인" 기타 매개변수를 표시하려는 경우에 사용합니다. 예를 들어 알림입니다.

참고: 오류 메시지, 작업 성공 메시지 또는 경고 메시지를 표시하는 데 모달을 사용하지 마십시오. 페이지에 남겨두세요.

잘못 구현된 오버레이는 작업 완료를 방해할 수 있습니다. 모달 창이 사용자를 방해하지 않도록 하려면 다음을 고려하세요.

사용자에게 모달 창을 닫는 방법을 제공하여 탈출 방법을 제공하십시오. 이는 다음과 같은 방법으로 달성할 수 있습니다.

• 취소 버튼
• 닫기 버튼
• Esc 키
• 창밖을 클릭하세요

접근성 팁: 모든 모달 창에는 해당 창을 닫을 수 있는 접근 가능한 키보드 컨트롤이 있어야 합니다. 예를 들어 Esc 키는 창을 닫아야 합니다.

모달 제목으로 사용자에게 컨텍스트를 제공하세요. 이를 통해 사용자는 원래 페이지를 떠나지 않았기 때문에 자신이 어디에 있는지 알 수 있습니다.

팁: 버튼 라벨(모달 창을 시작함)과 모달 제목이 일치해야 합니다.

버튼 라벨에는 명확한 이름이 포함되어야 합니다. 이는 모든 버튼에 적용됩니다. 모달 창의 경우 '닫기' 버튼은 '닫기' 버튼 아이콘 또는 'x'로 표시되어야 합니다.

참고: 버튼 아이콘을 혼란스럽게 만들지 마십시오. 사용자가 작업을 취소하려고 할 때 모달 창이 다른 취소 버튼과 함께 나타나면 혼란이 발생합니다. “취소를 취소하는 건가요? 아니면 계속할까요?”

모달 창은 너무 크거나 작아서는 안 되며, 적절한 크기가 되기를 바랍니다. 목표는 컨텍스트를 유지하는 것이므로 모달 창이 전체 화면을 차지해서는 안 됩니다. 내용은 모델 창과 일치해야 합니다. 스크롤바가 필요한 경우 새 페이지를 만들 수 있습니다.

• 위치는 화면 상단에 있습니다. 모바일 보기에서는 모달 창을 아래에 배치하면 모달 창이 사라질 수 있기 때문입니다.
• 크기 — 모델 창 화면의 50% 이상을 사용하지 마십시오.

모달 창을 열 때 라이트박스 효과(배경을 어둡게)를 사용하세요. 이는 모달 창에 주의를 끌고 사용자가 상위 페이지와 상호 작용할 수 없음을 나타냅니다.

접근성 팁: 키보드 포커스를 모달 창으로 설정하세요.

팝업 모달 창으로 사용자를 놀라게 하지 마세요. 버튼 클릭, 링크 따라가기, 옵션 선택 등의 사용자 작업이 모달 창을 트리거하도록 합니다. 저절로 열리는 모달 창은 사용자를 놀라게 하고 빠르게 닫힐 수 있습니다.

모달과 모바일 장치는 일반적으로 함께 잘 작동하지 않습니다. 모달이 너무 크거나 화면 공간을 너무 많이 차지하거나 너무 작기 때문에 콘텐츠를 보기가 어렵습니다. 장치 키보드 및 중첩된 스크롤 막대와 같은 요소를 추가합니다. 사용자는 모달 창 필드를 잡으려고 손가락을 움직이고 확대/축소할 수만 있습니다. 모달 창에 대한 더 나은 대안이 있으므로 모바일 장치에서는 사용하면 안 됩니다.

모달 창을 만들 때 접근 가능한 키보드 컨트롤을 추가하는 것을 잊지 마세요. 다음을 고려하세요:

모달 창 열기 - 대화 상자를 호출하는 요소는 키보드에서 액세스할 수 있어야 합니다.

대화 상자 창으로 포커스 이동 — 모달 창이 열리면 키보드 포커스를 처음으로 이동해야 합니다.

키보드 포커스 제어 — 포커스가 대화 상자로 이동되면 대화 상자가 닫힐 때까지 포커스가 그 안에서 "잠겨" 있어야 합니다.

대화 상자 닫기 — 모든 모달 창에는 해당 창을 닫으려면 액세스 가능한 키보드 컨트롤이 있어야 합니다.

ARIA(Accessible Rich Internet Application) 표준은 웹 콘텐츠 및 웹 애플리케이션의 접근성을 향상시키는 방법을 정의합니다.

다음 ARIA 태그는 액세스 가능한 모달 창을 생성할 때 유용할 수 있습니다: 역할 = "대화 상자", aria - 숨김, aria - 레이블

또한 시력이 약한 사용자도 주의하세요. 모니터의 화면 돋보기를 사용하여 화면 내용을 확대할 수 있습니다. 확대하면 사용자는 화면의 일부만 볼 수 있습니다. 이 경우 모달 창이 모바일 장치와 동일한 방식으로 표시됩니다.

사람들이 자동으로 모달 창을 닫는 방법을 배웠다면 왜 이를 사용하고 싶습니까?

사용자의 주의를 끌고, 컨텍스트를 유지하고, 사용자 인터페이스를 단순화하는 것은 모달 창의 큰 이점입니다. 그러나 사용자 경험을 방해하고 모달 창 뒤에 콘텐츠를 숨겨 상위 페이지와의 상호 작용을 불가능하게 한다는 단점도 있습니다. 모달 창이 항상 답이 될 수는 없습니다. 선택할 때 다음 사항을 고려하십시오.

체크리스트

• 모달 창은 언제 표시됩니까?
• 모달 창을 어떻게 표시합니까?
• 모달 창은 어떻게 생겼나요?
• 우리는 어떤 정보를 제공하고 수집하나요?

모달 창을 위한 대체 UI 구성 요소가 있습니다. 비모달 또는 토스트(Microsoft 및 Google이 머티리얼 디자인에서 사용하는 용어)로 알려져 있습니다. 자세한 내용은 내 다음 게시물을 읽어보세요.

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

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

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

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

팝업 창에 피드백 양식을 표시하기 위한 jQuery 플러그인입니다.

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

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

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

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

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

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

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