app/template/default/Block/Sp/Item/error_modal.twig line 1

Open in your IDE?
  1. <style>
  2.     #error_modal.modal {
  3.         display: none;
  4.         position: fixed;
  5.         z-index: 10001;
  6.         padding-top: 200px;
  7.         left: 0;
  8.         top: 0;
  9.         width: 100%;
  10.         height: 100%;
  11.         overflow: auto;
  12.         background-color: rgb(0, 0, 0);
  13.         background-color: rgba(0, 0, 0, 0.4);
  14.     }
  16.     #error_modal .modal-content {
  17.         background-color: #fefefe;
  18.         margin: auto;
  19.         border: 1px solid #888;
  20.         width: 500px;
  21.         max-width: 90%;
  22.     }
  24.     #error_modal .modal-content .modal-header {
  25.         padding: 7px;
  26.         border-bottom: none;
  27.     }
  29.     #error_modal .modal-content .modal-header img {
  30.         width: 30px;
  31.         vertical-align: middle;
  32.     }
  34.     #error_modal .modal-content .modal-header span {
  35.         font-size: 25px;
  36.         font-weight: bold;
  37.         vertical-align: middle;
  38.     }
  40.     #error_modal .modal-content .modal-body {
  41.         padding-top: 5px;
  42.         padding-bottom: 5px;
  43.     }
  45.     #error_modal .modal-content .modal-body p {
  46.         margin-bottom: 5px;
  47.     }
  49.     #error_modal .modal-content .modal-body a {
  50.         font-weight: bold;
  51.     }
  53.     #error_modal .modal-content .modal-footer {
  54.         border-top: none;
  55.         padding: 15px;
  56.     }
  58.     #error_modal .modal-content .modal-footer .alert-btn-continue {
  59.         padding: 10px;
  60.         border-radius: 5px;
  61.         background: #FA9401;
  62.         color: white;
  63.         font-weight: bold;
  64.         text-decoration: unset;
  65.         margin-right: 10px;
  66.     }
  68.     #error_modal .modal-content .modal-footer .alert-btn-cancel {
  69.         padding: 10px;
  70.         text-decoration: unset;
  71.         color: #333;
  72.         border-radius: 5px;
  73.         background: #F3F3F3;
  74.         font-weight: bold;
  75.         width: fit-content;
  76.         margin: 0;
  77.         float: none;
  78.         border: none;
  79.     }
  80.     #error_modal .modal-content .modal-footer a.disabled {
  81.         color: currentColor;
  82.         cursor: not-allowed;
  83.         opacity: 0.5;
  84.         text-decoration: none;
  85.     }
  86. </style>
  88. <script>
  89.     function showErrorModal(errorMessage) {
  90.         var overlayEle = $('.bg-load-overlay');
  91.         if (overlayEle.length) {
  92.                 overlayEle.fadeOut(function () {
  93.                 $(this).remove();
  94.             });
  95.         }
  96.         $('#error_modal .error-message').html(errorMessage);
  97.         $('#error_modal .alert-btn-cancel').removeClass('disabled');
  98.         $('#error_modal .alert-btn-continue').removeClass('disabled');
  99.         $('#error_modal').show();
  100.     }
  102.     function closeErrorModal() {
  103.         $('#error_modal .error-message').html('');
  104.         $('#error_modal').hide();
  105.     }
  107.     $(document).on('click', '.see-the-cart', function () {
  108.         $('#error_modal .alert-btn-cancel').addClass('disabled');
  109.         $('#error_modal .alert-btn-continue').addClass('disabled');
  110.     })
  111. </script>
  113. <div id="error_modal" class="modal">
  114.     <div class="modal-content">
  115.         <div class="modal-header">
  116.             <img src="/stylesheets/images/icons-png/warning.png"/>
  117.             <span>注意</span>
  118.         </div>
  119.         <div class="modal-body">
  120.             <p class="error-message"></p>
  121.         </div>
  122.         <div class="modal-footer">
  123.             <a class="alert-btn-continue see-the-cart" href="{{ url("cart") }}">カートを見る</a>
  124.             <a class="alert-btn-cancel" onclick="closeErrorModal();" href="javascript:void(0);">キャンセル</a>
  125.         </div>
  126.     </div>
  127. </div>