문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 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:18]
emblim98 		wiki:howto:how_to_-_css_js_modal [2023/01/13 18:44] (현재)
줄 104: 줄 104:
 =====Add Header and Footer===== =====Add Header and Footer=====
 modal-header, modal-body, modal-footer를 위한 클래스를 추가합니다.\\ modal-header, modal-body, modal-footer를 위한 클래스를 추가합니다.\\
-====예제====+====HTML 예제====
 <code 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> </code>
 \\ \\
 modal 헤더, 바디 그리고 풋터에 스타일을 지정하고 modal에 애니메이션 슬라이드를 추가합니다.\\ modal 헤더, 바디 그리고 풋터에 스타일을 지정하고 modal에 애니메이션 슬라이드를 추가합니다.\\
 <code css> <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> </code>
  
 =====Bottom Modal ("Bottom sheets")===== =====Bottom Modal ("Bottom sheets")=====
-하단에서 슾라이드 되는 화면 전체 너비의 모달을 생성하는 방법에 관한 예제 +하단에서 슬라이드 되는 화면 전체 너비의 모달을 생성하는 방법에 관한 예제 
-<HTML>+<code css> 
 +<!DOCTYPE html> 
 +<html> 
 +<head> 
 +<meta name="viewport" content="width=device-width, initial-scale=1"> 
 +<style> 
 +body {font-family: Arial, Helvetica, sans-serif;}
  
-</HTML>+/* 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.1617934706.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