문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

현재 위치: start » wiki » howto » how_to_-_css_js_modal
wiki:howto:how_to_-_css_js_modal

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

양쪽 이전 판 이전 판
다음 판 		이전 판
wiki:howto:how_to_-_css_js_modal [2021/04/09 11:10]
emblim98 		wiki:howto:how_to_-_css_js_modal [2023/01/13 18:44] (현재)
줄 17: 줄 17:
 \\ \\
 Step 1) Add %%HTML%%:\\ Step 1) Add %%HTML%%:\\
-====예제====+====HTML 예제====
 <code html> <code html>
 <h2>Modal Example</h2> <h2>Modal Example</h2>
줄 33: 줄 33:
 \\ \\
 Step 2) Add %%CSS%%:\\ Step 2) Add %%CSS%%:\\
-====예제====+====CSS 예제====
 <code css> <code css>
 <style> <style>
줄 76: 줄 76:
 \\ \\
 Step 3) Add %%JavaScript%%:\\ Step 3) Add %%JavaScript%%:\\
-====예제====+====JavaScript 예제====
 <code javascript> <code javascript>
     <script>     <script>
줄 102: 줄 102:
 </code> </code>
  
 +=====Add Header and Footer=====
 +modal-header, modal-body, modal-footer를 위한 클래스를 추가합니다.\\
 +====HTML 예제====
 +<code html>
 +    <h2>Animated Modal with Header and Footer</h2>
 +    <!-- Trigger/Open The Modal -->
 +    <button id="myBtn">Open Modal</button>
 +    <!-- The Modal -->
 +    <div id="myModal" class="modal">
 +        <!-- Modal content -->
 +        <div class="modal-content">
 +            <div class="modal-header">
 +                <span class="close">&times;</span>
 +                <h2>Modal Header</h2>
 +            </div>
 +            <div class="modal-body">
 +                <p>Don't judge a book by its cover.</p>
 +                <p>Don't cross the bridge until you come to it.</p>
 +            </div>
 +            <div class="modal-footer">
 +                <h3>Modal Footer</h3>
 +            </div>
 +        </div>
 +    </div>
 +</code>
 +\\
 +modal 헤더, 바디 그리고 풋터에 스타일을 지정하고 modal에 애니메이션 슬라이드를 추가합니다.\\
 +<code css>
 +<!DOCTYPE html>
 +<html lang="en">
 +
 +<head>
 +    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 +    <style>
 +        body {font-family: Arial, Helvetica, sans-serif;}
 +        /* The Modal (background) */
 +        .modal {
 +            display: none;          /* Hidden by default */
 +            position: fixed;        /* Stay in place */
 +            z-index: 1;             /* Sit on top */
 +            padding-top: 100px;     /* Location of the box */
 +            left: 0;
 +            top: 0;
 +            width: 100%;            /* Full width */
 +            height: 100%;           /* Full height */
 +            overflow: auto;         /* Enable scroll if needed */
 +            background-color: rgb(0, 0, 0);         /* Fallback color */
 +            background-color: rgba(0, 0, 0, 0.4);   /* Black with opacity */
 +        }
 +        .modal-content {
 +            position: relative;
 +            background-color: #fefefe;
 +            margin: auto;
 +            padding: 0;
 +            border: 2px solid crimson;
 +            width: 80%;
 +            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 +            -webkit-animation-name: animatetop;
 +            -webkit-animation-duration: 0.4s;
 +            animation-name: animatetop;
 +            animation-duration: 0.4s;
 +        }
 +        /* Add Animation */
 +        @-webkit-keyframes animatetop {
 +            from {top: -300px; opacity: 0}
 +            to {top: 0; opacity: 1}
 +        }
 +        @keyframes animatetop {
 +            from {top: -300px; opacity: 0}
 +            to {top: 0; opacity: 1}
 +        }
 +        /* The Close Button */
 +        .close {
 +            color: white;
 +            float: right;
 +            font-size: 28px;
 +            font-weight: bold;
 +        }
 +        .close:hover, .close:focus {
 +            color: #000;
 +            text-decoration: none;
 +            cursor: pointer;
 +        }
 +        /* Modal Header */
 +        .modal-header {
 +            padding: 2px 16px;
 +            background-color: #5cb85c;
 +            color: white;
 +        }
 +        /* Modal Body */
 +        .modal-body {padding: 2px 16px;}
 +        /* Modal Footer */
 +        .modal-footer {
 +            padding: 2px 16px;
 +            background-color: #5cb85c;
 +            color: white;
 +        }
 +    </style>
 +</head>
 +<body>
 +    <h2>Animated Modal with Header and Footer</h2>
 +    <!-- Trigger/Open The Modal -->
 +    <button id="myBtn">Open Modal</button>
 +    <!-- The Modal -->
 +    <div id="myModal" class="modal">
 +        <!-- Modal content -->
 +        <div class="modal-content">
 +            <div class="modal-header">
 +                <span class="close">&times;</span>
 +                <h2>Modal Header</h2>
 +            </div>
 +            <div class="modal-body">
 +                <p>Don't judge a book by its cover.</p>
 +                <p>Don't cross the bridge until you come to it.</p>
 +            </div>
 +            <div class="modal-footer">
 +                <h3>Modal Footer</h3>
 +            </div>
 +        </div>
 +    </div>
 +    <script>
 +        // Get the modal
 +        var modal = document.getElementById("myModal");
 +        // Get the button that opens the modal
 +        var btn = document.getElementById("myBtn");
 +        // Get the <span> element that closes the modal
 +        var span = document.getElementsByClassName("close")[0];
 +        // When the user clicks the button, open the modal
 +        btn.onclick = function () {
 +            modal.style.display = "block";
 +        }
 +        // When the user clicks on <span> (x), close the modal
 +        span.onclick = function () {
 +            modal.style.display = "none";
 +        }
 +        // When the user clicks anywhere outside of the modal, close it
 +        window.onclick = function (event) {
 +            if (event.target == modal) {
 +                modal.style.display = "none";
 +            }
 +        }
 +    </script>
 +</body>
 +</html>
 +</code>
 +
 +=====Bottom Modal ("Bottom sheets")=====
 +하단에서 슬라이드 되는 화면 전체 너비의 모달을 생성하는 방법에 관한 예제
 +<code css>
 +<!DOCTYPE html>
 +<html>
 +<head>
 +<meta name="viewport" content="width=device-width, initial-scale=1">
 +<style>
 +body {font-family: Arial, Helvetica, sans-serif;}
 +
 +/* The Modal (background) */
 +.modal {
 +  display: none; /* Hidden by default */
 +  position: fixed; /* Stay in place */
 +  z-index: 1; /* Sit on top */
 +  left: 0;
 +  top: 0;
 +  width: 100%; /* Full width */
 +  height: 100%; /* Full height */
 +  overflow: auto; /* Enable scroll if needed */
 +  background-color: rgb(0,0,0); /* Fallback color */
 +  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
 +  -webkit-animation-name: fadeIn; /* Fade in the background */
 +  -webkit-animation-duration: 0.4s;
 +  animation-name: fadeIn;
 +  animation-duration: 0.4s
 +}
 +
 +/* Modal Content */
 +.modal-content {
 +  position: fixed;
 +  bottom: 0;
 +  background-color: #fefefe;
 +  width: 100%;
 +  -webkit-animation-name: slideIn;
 +  -webkit-animation-duration: 0.4s;
 +  animation-name: slideIn;
 +  animation-duration: 0.4s
 +}
 +
 +/* The Close Button */
 +.close {
 +  color: white;
 +  float: right;
 +  font-size: 28px;
 +  font-weight: bold;
 +}
 +
 +.close:hover,
 +.close:focus {
 +  color: #000;
 +  text-decoration: none;
 +  cursor: pointer;
 +}
 +
 +.modal-header {
 +  padding: 2px 16px;
 +  background-color: #5cb85c;
 +  color: white;
 +}
 +
 +.modal-body {padding: 2px 16px;}
 +
 +.modal-footer {
 +  padding: 2px 16px;
 +  background-color: #5cb85c;
 +  color: white;
 +}
 +
 +/* Add Animation */
 +@-webkit-keyframes slideIn {
 +  from {bottom: -300px; opacity: 0} 
 +  to {bottom: 0; opacity: 1}
 +}
 +
 +@keyframes slideIn {
 +  from {bottom: -300px; opacity: 0}
 +  to {bottom: 0; opacity: 1}
 +}
 +
 +@-webkit-keyframes fadeIn {
 +  from {opacity: 0} 
 +  to {opacity: 1}
 +}
 +
 +@keyframes fadeIn {
 +  from {opacity: 0} 
 +  to {opacity: 1}
 +}
 +</style>
 +</head>
 +<body>
 +
 +<h2>Bottom Modal</h2>
 +
 +<!-- Trigger/Open The Modal -->
 +<button id="myBtn">Open Modal</button>
 +
 +<!-- The Modal -->
 +<div id="myModal" class="modal">
 +
 +  <!-- Modal content -->
 +  <div class="modal-content">
 +    <div class="modal-header">
 +      <span class="close">&times;</span>
 +      <h2>Modal Header</h2>
 +    </div>
 +    <div class="modal-body">
 +      <p>Some text in the Modal Body</p>
 +      <p>Some other text...</p>
 +    </div>
 +    <div class="modal-footer">
 +      <h3>Modal Footer</h3>
 +    </div>
 +  </div>
 +
 +</div>
 +
 +<script>
 +// Get the modal
 +var modal = document.getElementById("myModal");
 +
 +// Get the button that opens the modal
 +var btn = document.getElementById("myBtn");
 +
 +// Get the <span> element that closes the modal
 +var span = document.getElementsByClassName("close")[0];
 +
 +// When the user clicks the button, open the modal 
 +btn.onclick = function() {
 +  modal.style.display = "block";
 +}
 +
 +// When the user clicks on <span> (x), close the modal
 +span.onclick = function() {
 +  modal.style.display = "none";
 +}
 +
 +// When the user clicks anywhere outside of the modal, close it
 +window.onclick = function(event) {
 +  if (event.target == modal) {
 +    modal.style.display = "none";
 +  }
 +}
 +</script>
 +
 +</body>
 +</html>
 +</code>
  
  
/volume1/web/dokuwiki/data/attic/wiki/howto/how_to_-_css_js_modal.1617934237.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)

문서 도구

별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki