Merge pull request #4468 from U-Mebius/fix/modal

fix #4466 「カートに追加しました」とメッセージが表示される不具合を修正
EC-CUBE · Aug 20, 2020 · 8cf150c · 8cf150c
2 parents 69eff6d + ba86831
commit 8cf150c
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 143 deletions.
diff --git a/html/template/default/assets/css/style.css b/html/template/default/assets/css/style.css
diff --git a/html/template/default/assets/css/style.css.map b/html/template/default/assets/css/style.css.map
diff --git a/html/template/default/assets/css/style.min.css b/html/template/default/assets/css/style.min.css
diff --git a/html/template/default/assets/css/style.min.css.map b/html/template/default/assets/css/style.min.css.map
diff --git a/html/template/default/assets/scss/project/_13.4.cartModal.scss b/html/template/default/assets/scss/project/_13.4.cartModal.scss
@@ -14,101 +14,65 @@ Styleguide 13.4
 */
 
 .ec-modal {
-
-  .checkbox {
-    display: none;
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 99999;
+  width: 100%;
+  height: 100%;
+
+  &.small {
+    width: 30%;
   }
 
-  .ec-modal-overlay {
-    opacity: 0;
-    transition: all 0.3s ease;
+  &.full {
     width: 100%;
     height: 100%;
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: -100;
-    transform: scale(1);
+  }
+
+  .ec-modal-overlay {
     display: flex;
+    justify-content: center;
+    align-items: center;
     background-color: rgba(0, 0, 0, 0.3);
+    width: 100%;
+    height: 100%;
   }
 
   .ec-modal-wrap {
-    background-color: #fff;
+    position: relative;
+    border-radius: 2px;
     border: 1px solid #333;
+    background-color: #fff;
     width: 90%;
     margin: 20px;
     padding: 40px 5px;
-    border-radius: 2px;
-    transition: all 0.5s ease;
-    -ms-flex-item-align: center;
-    align-self: center;
-
-    .ec-modal-box {
-      text-align: center;
-    }
-
-    .ec-modal-box div {
-      margin-top: 20px;
-    }
-
     @include media_desktop {
-      & {
-        padding: 40px 10px;
-        width: 50%;
-        margin: 20px auto;
-      }
-    }
-
-    &.small {
-      width: 30%;
-    }
-
-    &.full {
-      width: 100%;
-      height: 100%;
+      padding: 40px 10px;
+      width: 50%;
+      margin: 20px auto;
     }
   }
 
-  .ec-modal-overlay {
-    .ec-modal-close {
-      position: absolute;
-      right: 20px;
-      top: 10px;
-      font-size: 20px;
-      height: 30px;
-      width: 20px;
-
-      &:hover {
-        cursor: pointer;
-        color: #4b5361;
-      }
+  .ec-modal-close {
+    cursor: pointer;
+    position: absolute;
+    right: 20px;
+    top: 10px;
+    font-size: 20px;
+    height: 30px;
+    width: 20px;
+    &:hover {
+      color: #4b5361;
     }
   }
 
-  .ec-modal-overlay-close {
-    display: none;
-    width: 100%;
-    height: 100%;
-    position: fixed;
-    left: 0;
-    top: 0;
+  .ec-modal-box {
+    text-align: center;
   }
 
-  input:checked {
-    ~ .ec-modal-overlay {
-      transform: scale(1);
-      opacity: 1;
-      z-index: 9997;
-      overflow: auto;
-      .ec-modal-overlay-close {
-        display: block;
-      }
-    }
-
-    ~ .ec-modal-overlay .ec-modal-wrap {
-      transform: translateY(0);
-      z-index: 9999;
-    }
+  .ec-role {
+    margin-top: 20px;
   }
 }
diff --git a/src/Eccube/Resource/template/default/Product/detail.twig b/src/Eccube/Resource/template/default/Product/detail.twig
@@ -187,7 +187,7 @@ file that was distributed with this source code.
                         $('#ec-modal-header').html(this);
                     });
 
-                    $('#ec-modal-checkbox').prop('checked', true);
+                    $('.ec-modal').show()
 
                     // カートブロックを更新する
                     $.ajax({
@@ -205,6 +205,10 @@ file that was distributed with this source code.
                 });
             });
         });
+
+        $('.ec-modal-overlay, .ec-modal .ec-inlineBtn--cancel').on('click', function() {
+            $('.ec-modal').hide()
+        });
     </script>
 {% endblock %}
 
@@ -336,15 +340,13 @@ file that was distributed with this source code.
                         {{ form_rest(form) }}
                     </form>
                     <div class="ec-modal">
-                        <input type="checkbox" id="ec-modal-checkbox" class="checkbox">
                         <div class="ec-modal-overlay">
-                            <label for="ec-modal-checkbox" class="ec-modal-overlay-close"></label>
                             <div class="ec-modal-wrap">
-                                <label for="ec-modal-checkbox" class="ec-modal-close"><span class="ec-icon"><img src="{{ asset('assets/icon/cross-dark.svg') }}" alt=""/></span></label>
+                                <span class="ec-modal-close"><span class="ec-icon"><img src="{{ asset('assets/icon/cross-dark.svg') }}" alt=""/></span></span>
                                 <div id="ec-modal-header" class="text-center">{{ 'front.product.add_cart_complete'|trans }}</div>
                                 <div class="ec-modal-box">
                                     <div class="ec-role">
-                                        <label for="ec-modal-checkbox" class="ec-inlineBtn--cancel">{{ 'front.product.continue'|trans }}</label>
+                                        <span class="ec-inlineBtn--cancel">{{ 'front.product.continue'|trans }}</span>
                                         <a href="{{ url('cart') }}" class="ec-inlineBtn--action">{{ 'common.go_to_cart'|trans }}</a>
                                     </div>
                                 </div>

diff --git a/src/Eccube/Resource/template/default/Product/list.twig b/src/Eccube/Resource/template/default/Product/list.twig
@@ -68,7 +68,7 @@ file that was distributed with this source code.
                         $('#ec-modal-header').html(this);
                     });
 
-                    $('#ec-modal-checkbox').prop('checked', true);
+                    $('.ec-modal').show()
 
                     // カートブロックを更新する
                     $.ajax({
@@ -86,6 +86,10 @@ file that was distributed with this source code.
                 });
             });
         });
+
+        $('.ec-modal-overlay, .ec-modal .ec-inlineBtn--cancel').on('click', function() {
+            $('.ec-modal').hide()
+        });
     </script>
 {% endblock %}
 
@@ -205,15 +209,13 @@ file that was distributed with this source code.
                 </ul>
             </div>
             <div class="ec-modal">
-                <input type="checkbox" id="ec-modal-checkbox" class="checkbox">
                 <div class="ec-modal-overlay">
-                    <label for="ec-modal-checkbox" class="ec-modal-overlay-close"></label>
                     <div class="ec-modal-wrap">
-                        <label for="ec-modal-checkbox" class="ec-modal-close"><span class="ec-icon"><img src="{{ asset('assets/icon/cross-dark.svg') }}" alt=""/></span></label>
+                        <span class="ec-modal-close"><span class="ec-icon"><img src="{{ asset('assets/icon/cross-dark.svg') }}" alt=""/></span></span>
                         <div id="ec-modal-header" class="text-center">{{ 'front.product.add_cart_complete'|trans }}</div>
                         <div class="ec-modal-box">
                             <div class="ec-role">
-                                <label for="ec-modal-checkbox" class="ec-inlineBtn--cancel">{{ 'front.product.continue'|trans }}</label>
+                                <span class="ec-inlineBtn--cancel">{{ 'front.product.continue'|trans }}</span>
                                 <a href="{{ url('cart') }}" class="ec-inlineBtn--action">{{ 'common.go_to_cart'|trans }}</a>
                             </div>
                         </div>