app/template/default/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.         padding: 20px;
  20.         border: 1px solid #888;
  21.         width: 500px;;
  22.     }
  24.     #error_modal .modal-content .modal-header {
  25.         padding: 0px;
  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 p {
  41.         margin-bottom: 20px;
  42.     }
  44.     #error_modal .modal-content .modal-body a {
  45.         font-weight: bold;
  46.     }
  48.     #error_modal .modal-content .modal-footer {
  49.         border-top: none;
  50.         padding: 5px;
  51.     }
  53.     #error_modal .modal-content .modal-footer .alert-btn-continue {
  54.         padding: 10px;
  55.         border-radius: 5px;
  56.         background: #FA9401;
  57.         color: white;
  58.         font-weight: bold;
  59.         text-decoration: unset;
  60.         margin-right: 10px;
  61.     }
  63.     #error_modal .modal-content .modal-footer .alert-btn-cancel {
  64.         padding: 10px;
  65.         text-decoration: unset;
  66.         color: #333;
  67.         border-radius: 5px;
  68.         background-color: #F3F3F3;
  69.         font-weight: bold;
  70.     }
  71.     #error_modal .modal-content .modal-footer a.disabled {
  72.         color: currentColor;
  73.         cursor: not-allowed;
  74.         opacity: 0.5;
  75.         text-decoration: none;
  76.     }
  77. </style>
  79. <script>
  80.     function showErrorModal(errorMessage) {
  81.         $('#error_modal .error-message').html(errorMessage);
  82.         $('#error_modal .alert-btn-cancel').removeClass('disabled');
  83.         $('#error_modal .alert-btn-continue').removeClass('disabled');
  84.         $('#error_modal').show();
  85.     }
  87.     function closeErrorModal() {
  88.         $('#error_modal .error-message').html('');
  89.         $('#error_modal').hide();
  90.     }
  92.     $(document).on('click', '.see-the-cart', function () {
  93.         $('#error_modal .alert-btn-cancel').addClass('disabled');
  94.         $('#error_modal .alert-btn-continue').addClass('disabled');
  95.     })
  96. </script>
  98. <div id="error_modal" class="modal">
  99.     <div class="modal-content">
  100.         <div class="modal-header">
  101.             <img src="/stylesheets/images/icons-png/warning.png"/>
  102.             <span>注意</span>
  103.         </div>
  104.         <div class="modal-body">
  105.             <p class="error-message"></p>
  106.         </div>
  107.         <div class="modal-footer">
  108.             <a class="alert-btn-continue see-the-cart" href="{{ url("cart") }}">カートを見る</a>
  109.             <a class="alert-btn-cancel" onclick="closeErrorModal();" href="javascript:void(0);">キャンセル</a>
  110.         </div>
  111.     </div>
  112. </div>