w3.css

모달

모달은 현재 페이지 상단에 표시되는 대화 상자/팝업 창이다.

오픈 모달

W3.CSS 모달 클래스

W3.CSS는 모달 창에 대해 다음 클래스를 제공한다.

Class	Defines
w3-modal	모달 컨테이너
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 요소를 사용하여 모달을 연다.
그러나 이는 버튼이나 링크인 경우가 많다.

onclick 속성을 추가하고 document.getElementById() 메서드를 사용하여 모달의 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">

애니메이션 모달

확대 맨 위 맨 아래 왼쪽 오른쪽 점점 뚜렷해지다

예제

<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>

모달 로그인 양식

이 예에서는 로그인을 위한 모달을 만든다.

예제

<button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-green w3-large">Login</button>

탭 콘텐츠가 포함된 모달

이 예에서는 탭 콘텐츠가 포함된 모달을 만든다.

예제

<button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Open Tabbed Modal</button>

<div id="id01" class="w3-modal">
 <div class="w3-modal-content w3-card-4 w3-animate-zoom">
  <header class="w3-container w3-blue"> 
   <span onclick="document.getElementById('id01').style.display='none'" 
   class="w3-button w3-blue w3-xlarge w3-display-topright">×</span>
   <h2>Header</h2>
  </header>

  <div class="w3-bar w3-border-bottom">
   <button class="tablink w3-bar-item w3-button" onclick="openCity(event, 'London')">London</button>
   <button class="tablink w3-bar-item w3-button" onclick="openCity(event, 'Paris')">Paris</button>
   <button class="tablink w3-bar-item w3-button" onclick="openCity(event, 'Tokyo')">Tokyo</button>
  </div>

  <div id="London" class="w3-container city">
   <h1>London</h1>
   <p>London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>

  <div id="Paris" class="w3-container city">
   <h1>Paris</h1>
   <p>Paris is the capital of France.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>

  <div id="Tokyo" class="w3-container city">
   <h1>Tokyo</h1>
   <p>Tokyo is the capital of Japan.</p><br>
  </div>

  <div class="w3-container w3-light-grey w3-padding">
   <button class="w3-button w3-right w3-white w3-border" 
   onclick="document.getElementById('id01').style.display='none'">Close</button>
  </div>
 </div>
</div>

모달 닫기

위의 예에서는 버튼을 사용하여 모달을 닫는다.
그러나 약간의 JavaScript를 사용하면 모달 상자 외부를 클릭할 때 모달을 닫을 수도 있다.

예제

// 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";
  }
}

고급: 라이트박스(모달 이미지 갤러리)

예제

<div class="w3-row-padding" style="margin:0 -16px">
  <div class="w3-col s4">
    <img src="img_nature_wide.jpg" style="width:100%;cursor:pointer"
    onclick="openModal();currentDiv(1)" class="w3-hover-shadow">
  </div>
  <div class="w3-col s4">
    <img src="img_snow_wide.jpg" style="width:100%;cursor:pointer"
    onclick="openModal();currentDiv(2)" class="w3-hover-shadow">
  </div>
  <div class="w3-col s4">
    <img src="img_mountains_wide.jpg" style="width:100%;cursor:pointer"
    onclick="openModal();currentDiv(3)" class="w3-hover-shadow">
  </div>
</div>

<div id="myModal" class="w3-modal w3-black">
 <span class="w3-text-white w3-xxlarge w3-hover-text-grey w3-container w3-display-topright" onclick="closeModal()" style="cursor:pointer">×</span>
 <div class="w3-modal-content">

  <div class="w3-content" style="max-width:1200px">
   <img class="mySlides" src="img_nature_wide.jpg" style="width:100%">
   <img class="mySlides" src="img_snow_wide.jpg" style="width:100%">
   <img class="mySlides" src="img_mountains_wide.jpg" style="width:100%">
   <div class="w3-row w3-black w3-center">
    <div class="w3-display-container">
     <p id="caption"></p>
     <span class="w3-display-left w3-btn" onclick="plusDivs(-1)">❮</span>
     <span class="w3-display-right w3-btn" onclick="plusDivs(1)">❯</span>
    </div>
    <div class="w3-col s4">
     <img class="demo w3-opacity w3-hover-opacity-off" src="img_nature_wide.jpg" style="width:100%" onclick="currentDiv(1)" alt="Nature and sunrise">
    </div>
    <div class="w3-col s4">
     <img class="demo w3-opacity w3-hover-opacity-off" src="img_snow_wide.jpg" style="width:100%" onclick="currentDiv(2)" alt="French Alps">
    </div>
    <div class="w3-col s4">
     <img class="demo w3-opacity w3-hover-opacity-off" src="img_mountains_wide.jpg" style="width:100%" onclick="currentDiv(3)" alt="Mountains and fjords">
    </div>
   </div> <!-- End row -->
  </div> <!-- End w3-content -->
  
 </div> <!-- End modal content -->
</div> <!-- End modal -->