퍼블리싱 - 커뮤니티 공유팝업

3 years ago · 56e11e23f9
parent 7cddaa5a62
commit 56e11e23f9
2 changed files with 46 additions and 0 deletions
--- a/src/main/webapp/m/css/style.css
+++ b/src/main/webapp/m/css/style.css
@ -5307,6 +5307,30 @@ main {
    margin-top: 20px;
 }

+.modal-wrapper .center_title {
+    display: flex;
+    justify-content: center;
+    color: #414141;
+    font-size: 1rem;
+    font-weight: 400;
+    margin-top: 10px;
+}
+
+.modal-wrapper .container_y_n {
+    display: flex;
+    margin-top: 20px;
+    justify-content: space-around;
+}
+
+.modal-wrapper .btn_y_n {
+    height: 30px;
+    width: 80px;
+    border-radius: 14px;
+    background-color: #FF9C01;
+    color: #FFFFFF;
+
+}
+
 /* 13p */

 .modal-wrapper .input_cont {
--- a/src/main/webapp/m/html/bf_growth_record/9-2.기록-젖병.html
+++ b/src/main/webapp/m/html/bf_growth_record/9-2.기록-젖병.html
@ -17,6 +17,19 @@
 </head>

 <body>
+    <!-- modal-wrapper : 커뮤니티 공유 팝업 -->
+    <div id="sharedPop" class="modal-wrapper">
+        <div class="modal_content" style="width: calc(100% - 80px)">
+            <div class="center_title">기록을 커뮤니티에 공유하시겠습니까?</div>
+            <div class="container_y_n">
+                <button class="btn_y_n">예</button>
+                <button class="btn_y_n">아니오</button>
+            </div>
+        </div>
+        <div class="modal_layer"></div>
+    </div>
+    <!-- //modal-wrapper -->
+
    <!-- wrap -->
    <div class="wrap" id="view_sn_nutrition_powderedmilk">

@ -510,6 +523,15 @@
          clickable: true,
        }
    });
+
+    $(".nutrition_kinds_btn").on("click", function () {
+        $("#sharedPop").toggleClass("open")
+    })
+
+
+    $(".btn_y_n").on("click", function () {
+        $("#sharedPop").removeClass("open")
+    })
 </script>

 </html>