W3.CSS 모달
모달은 현재 페이지 상단에 표시되는 대화 상자/팝업 창입니다.
W3.CSS 모달 클래스
W3.CSS는 모달 창에 대해 다음 클래스를 제공합니다.
| 등급 | 정의 |
|---|---|
| w3-모달 | 모달 컨테이너 |
| w3-modal-content | 모달 콘텐츠 |
모달 만들기
w3-modal 클래스는 모달에 대한 컨테이너를 정의합니다 .
w3-modal-content 클래스는 모달 콘텐츠를 정의합니다 .
모달 콘텐츠는 모든 HTML 요소(div, 제목, 단락, 이미지 등)가 될 수 있습니다.
예시
<!-- Trigger/Open the Modal -->
<button onclick="document.getElementById('id01').style.display='block'"
class="w3-button">Open Modal</button>
<!-- The Modal -->
<div
id="id01" class="w3-modal">
<div class="w3-modal-content">
<div
class="w3-container">
<span onclick="document.getElementById('id01').style.display='none'"
class="w3-button w3-display-topright">×</span>
<p>Some text in the Modal..</p>
<p>Some text in the Modal..</p>
</div>
</div>
</div>
모달 열기
HTML 요소를 사용하여 모달을 엽니다. 그러나 이것은 종종 버튼이나 링크입니다.
document.getElementById() 메서드를 사용하여 onclick 속성을 추가하고 모달의 id(이 예에서는 id01 )를 가리킵니다.
모달 닫기
모달을 닫으려면 w3-button 클래스를 모달의 id( id01 ) 를 가리키는 onclick 속성과 함께 요소에 추가합니다 . 모달 외부를 클릭하여 닫을 수도 있습니다(아래 예 참조).
팁: × 닫기 아이콘에 대해 문자 "x"가 아닌 선호되는 HTML 엔터티입니다.
모달 머리글 및 바닥글
w3-container 클래스를 사용 하여 모달 콘텐츠 내부에 다른 섹션을 만듭니다.
예시
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<header class="w3-container w3-teal">
<span onclick="document.getElementById('id01').style.display='none'"
class="w3-button w3-display-topright">×</span>
<h2>Modal Header</h2>
</header>
<div
class="w3-container">
<p>Some text..</p>
<p>Some text..</p>
</div>
<footer class="w3-container
w3-teal">
<p>Modal Footer</p>
</footer>
</div>
</div>
카드로 모달
모달을 카드로 표시하려면 w3-card-* 클래스 중 하나를 w3-modal-content 컨테이너에 추가합니다.
예시
<div class="w3-modal-content w3-card-4">
애니메이션 모달
w3-animate-zoom|top|bottom|right|left 클래스 중 하나를 사용 하여 특정 방향에서 모달로 슬라이드합니다.
예시
<div class="w3-modal-content w3-animate-zoom">
<div class="w3-modal-content w3-animate-top">
<div class="w3-modal-content w3-animate-bottom">
<div class="w3-modal-content w3-animate-left">
<div class="w3-modal-content w3-animate-right">
<div class="w3-modal-content w3-animate-opacity">
w3-modal 요소에 w3-animate-opacity 클래스를 설정하여 모달의 배경색을 페이드 인할 수도 있습니다 .
예시
<div class="w3-modal w3-animate-opacity">
모달 이미지
이미지를 클릭하면 전체 크기로 모달로 표시됩니다.
예시
<img src="img_snowtops.jpg" onclick="document.getElementById('modal01').style.display='block'"
class="w3-hover-opacity">
<div id="modal01" class="w3-modal w3-animate-zoom" onclick="this.style.display='none'">
<img class="w3-modal-content" src="img_snowtops.jpg">
</div>
모달 이미지 갤러리
이미지를 클릭하면 전체 크기로 표시됩니다.
예시
<div class="w3-row-padding">
<div class="w3-container w3-third">
<img src="img_snowtops.jpg" style="width:100%" onclick="onClick(this)">
</div>
<div class="w3-container w3-third">
<img
src="img_lights.jpg" style="width:100%" onclick="onClick(this)">
</div>
<div class="w3-container w3-third">
<img
src="img_mountains.jpg" style="width:100%" onclick="onClick(this)">
</div>
</div>
<div id="modal01" class="w3-modal" onclick="this.style.display='none'">
<img class="w3-modal-content" id="img01" style="width:100%">
</div>
<script>
function
onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
}
</script>
모달 로그인 양식
이 예는 로그인을 위한 모달을 생성합니다:
예시
탭 콘텐츠가 있는 모달
이 예에서는 탭 콘텐츠가 있는 모달을 만듭니다.
예시
Close the Modal
In the examples above, we use a button to close the modal. However, with a little bit of JavaScript, you can also close the modal when clicking outside of the modal box:
Example
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target
== modal) {
modal.style.display = "none";
}
}
Advanced: Lightbox (Modal Image Gallery)
This example shows how to add an image slideshow inside a modal, to create a "lightbox":
Nature and sunrise
❮ ❯
Example
Tip: To learn more about slideshows, visit our W3.CSS Slideshow chapter.