W3.CSS 모달
모달은 현재 페이지의 상단에 표시되는 대화 상자 / 팝업 창입니다 :
모달을 만드는 방법
예
<!-- Trigger/Open the Modal -->
<button onclick="document.getElementById('id01').style.display='block'"
class="w3-btn">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-closebtn">×</span>
<p>Some text in the Modal..</p>
<p>Some text in the Modal..</p>
</div>
</div>
</div> »그에게 자신을보십시오 은 "W3 모달"클래스
모달 클래스 = "W3 모달"와 (A <DIV> 같은) 어떤 HTML 컨테이너가 될 수 있습니다.
은 "W3 모달 콘텐츠"클래스
모든 모달 콘텐츠는 클래스 = "W3 모달 콘텐츠"와 함께 HTML 컨테이너에 배치해야합니다.
모달 콘텐츠가 어떤 HTML 요소가 될 수 있습니다 (제목, 단락, 이미지 등)
모달을 엽니 다
모달을 열 수있는 HTML 요소를 사용합니다. 이것은 종종 단추 또는 링크입니다.
데 document.getElementById () 메소드를 사용하여 모달 (예에서 id01)의 id에 온 클릭 속성과 포인트를 추가하고 "트리거"버튼 (id01)과 일치 고유 ID를 지정합니다.
모달 닫기
, 모달을 닫습니다 모달 (id01)의 ID를 지정하는 온 클릭 속성과 함께 요소로 W3-closebtn 클래스를 추가합니다. 또한 모달의 외부를 클릭하여 닫을 수 있습니다 (아래 예 참조).
 | &타임스; (×)이 아니라 문자 "x"를보다 가까이 버튼에 대한 선호 아이콘 인 HTML 엔티티입니다. |
|---|
모달 헤더 및 바닥 글
의 <DIV> 클래스 = "W3 모달 콘텐츠"와, 사용 W3 컨테이너 클래스 내부 모달의 다른 섹션을 만들 수 있습니다 :
예
<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-closebtn">×</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 모달 콘텐츠 컨테이너에 W3 - 카드 -의 * 클래스를 추가, 카드로 모달를 표시하려면 :
애니메이션 조동사
: 특정 방향에서 모달에 밀어 왼쪽 클래스 | 상단 | | 맨 아래 | 바로 W3 - 애니메이션 - 줌 중 하나를 사용
예
<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 모달)에서 페이드 수 있습니다 :
모달 이미지
전체 화면에 표시하려면 이미지를 클릭 :
예
<img src="img_fjords.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_fjords.jpg">
</div>
»그에게 자신을보십시오 모달 이미지 갤러리
전체 화면에 표시 할 이미지를 클릭 :
예
<div class="w3-row-padding">
<div class="w3-container w3-third">
<img src="img_fjords.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>
»그에게 자신을보십시오 모달 로그인 양식
이 예는 로그인에 대한 모달를 만듭니다
모달 탭
이 예는 탭 내용으로 모달를 만듭니다
모달을 닫습니다
위의 예에서, 우리는 모달를 닫 버튼을 사용합니다. 모달 상자 외부를 클릭 그러나, 자바 스크립트의 작은 비트와 함께, 당신은 또한 모달을 닫을 수 있습니다 :
예
// 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";
}
}
»그에게 자신을보십시오