Forráskód Böngészése

인증 모달 구현

inkoreakim 2 éve
szülő
commit
1d2b18dc23

+ 40 - 0
src/main/resources/static/css/modal.css

@@ -0,0 +1,40 @@
+.modal {
+    /*position: absolute;*/
+    position: fixed;
+    display: none;
+
+    justify-content: center;
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 100%;
+
+    background-color: rgba(0, 0, 0, 0.4);
+}
+
+.modal_body {
+    position: absolute;
+    top: 50%;
+
+
+    width: 400px;
+    height: 600px;
+
+    padding: 40px;
+
+    text-align: center;
+
+    background-color: rgb(255, 255, 255);
+    border-radius: 10px;
+    box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
+
+    transform: translateY(-50%);
+}
+
+.modal .btn-close {
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin: 10px; /* 필요에 따라 여백 조정 */
+}

+ 17 - 0
src/main/resources/static/js/contact/advice.js

@@ -0,0 +1,17 @@
+function openApply () {
+    const manual = document.getElementById('advice_manual');
+    const manualHead = document.getElementById('advice_manual_header');
+    const apply = document.getElementById('advice_apply');
+    const applyHead = document.getElementById('advice_apply_header');
+
+    manual.style.display = 'none';
+    manualHead.style.display = 'none';
+    apply.style.display = 'block';
+    applyHead.style.display = 'block';
+}
+
+function subForm () {
+    if (validationCheck()) {
+
+    }
+}

+ 7 - 0
src/main/resources/static/js/contact/adviceValidation.js

@@ -0,0 +1,7 @@
+function validationCheck () {
+    const form = document.getElementById('logi_ad_form')
+    alert(form.elements['name'].value);
+    if (form.elements['name'].value.length < 1 || form.elements['name'].value.length > 12) {
+        alert('이름이 너무 큽니다.')
+    }
+}

+ 6 - 0
src/main/resources/static/js/contact/openModal.js

@@ -0,0 +1,6 @@
+function openModal (tag) {
+    const modal = document.querySelector('.modal');
+    modal.style.display = 'flex'
+}
+
+

+ 10 - 0
src/main/resources/templates/html/modal/lg-advice-modal.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>$Title$</title>
+</head>
+<body>
+$END$
+</body>
+</html>