차이

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

--- wiki:howto:how_to_-_css_js_modal [2021/04/09 13:20]
emblim98
+++ wiki:howto:how_to_-_css_js_modal [2023/01/13 18:44] (현재)
@@ 줄 129: / 줄 129: @@
 \\
 modal 헤더, 바디 그리고 풋터에 스타일을 지정하고 modal에 애니메이션 슬라이드를 추가합니다.\\
-<code css>
-</code>
-=====Bottom Modal ("Bottom sheets")=====
-하단에서 슬라이드 되는 화면 전체 너비의 모달을 생성하는 방법에 관한 예제
 <code css>
 <!DOCTYPE html>
@@ 줄 145: / 줄 139: @@
         /* The Modal (background) */
         .modal {
-            display: none;      /* Hidden by default */
+            display: none;          /* Hidden by default */
-            position: fixed;    /* Stay in place */
+            position: fixed;        /* Stay in place */
-            z-index: 1;         /* Sit on top */
+            z-index: 1;             /* Sit on top */
-            padding-top: 100px; /* Location of the box */
+            padding-top: 100px;     /* Location of the box */
             left: 0;
             top: 0;
-            width: 100%;        /* Full width */
+            width: 100%;            /* Full width */
-            height: 100%;       /* Full height */
+            height: 100%;           /* Full height */
-            overflow: auto;     /* Enable scroll if needed */
+            overflow: auto;         /* Enable scroll if needed */
-            background-color: rgb(0, 0, 0);     /* Fallback color */
+            background-color: rgb(0, 0, 0);         /* Fallback color */
-            background-color: rgba(0, 0, 0, 0.4);/* Black with opacity */
+            background-color: rgba(0, 0, 0, 0.4);   /* Black with opacity */
         }
         .modal-content {
@@ 줄 198: / 줄 192: @@
         }
         /* Modal Body */
-        .modal-body {
+        .modal-body {padding: 2px 16px;}
-            padding: 2px 16px;
-        }
         /* Modal Footer */
         .modal-footer {
@@ 줄 252: / 줄 244: @@
         }
     </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>

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

사용자 도구

사이트 도구

차이

문서 도구