时间戳

首页 > 解决方案 > 关闭按钮在我的模态弹出图像中不起作用

html - 关闭按钮在我的模态弹出图像中不起作用

问题描述

我有一个带有关闭按钮的弹出图像，它不起作用 ，请有人检查问题。

jQuery(document).ready(function($) {

  var $modal_popup = '9a3a3fc18bd438fca6433562e193b511';
  var $only_once = '1';

  var $s3waas_modal_cookie = getCookie('s3waas_modal_cookie');

  if ($modal_popup != $s3waas_modal_cookie) {
    deleteCookie('s3waas_modal_cookie');
    $s3waas_modal_cookie = null;
  }
  if (!$only_once) {
    $('.modalbox-container').removeClass('hide');
    $('html,body').css('overflow', 'hidden');
    $('.modalbox-banner').focus();
  } else {
    if ($s3waas_modal_cookie == null) {
      $('.modalbox-container').removeClass('hide');
      $('html,body').css('overflow', 'hidden');
      $('.modalbox-banner').focus();
    }
  }

  $("#s3wassModalpopupClose").click(function() {
    if ($only_once) {
      let nonce = $(this).attr('data-nonce');
      $.post(ajaxurl, {
        nonce: nonce,
        action: 's3waas_modal_cookie'
      }, function() {
        return true
      });
    }
    $(".modalbox-container").hide();
    $('.skip-to-content').focus();
    $('html,body').css('overflow', '');
  });
  $(document).keyup(function(e) {
    if (e.key === "Escape") { // escape key maps to keycode `27`
      if ($(".modalbox-container").length > 0) {
        $("#s3wassModalpopupClose").trigger('click');
      }
    }
  });
})
.modalbox-container {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.75);
  overflow-y: auto;
  display: inline-grid;
  align-items: center;
  z-index: 999999;
}

.modalbox-container .modal-box {
  display: inline-block;
  max-width: 1000px;
  position: relative;
  margin: 0 auto;
}

.modalbox-container .modal-box img {
  max-width: 100%;
  border: 2px solid #fff;
  border-radius: 5px 0 5px 5px;
  box-shadow: 0 0 30px 0 #000;
}

.modalbox-container .close-popup {
  position: absolute;
  top: 0;
  right: -40px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  background: #fff;
  text-decoration: none;
  font-size: 40px;
  color: #000;
  border-radius: 0 5px 5px 0;
}

.contrast .modalbox-container .close-popup {
  background: #ff0;
}

@media (max-width: 800px) {
  .modalbox-container .modal-box {
    margin: 45px;
  }
  .modalbox-container .modal-box img {
    width: 100%;
  }
}
<!DOCTYPE html>
<html lang="en-US">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>New Page 1</title>
</head>

<body class="home page-template-default page page-id-26984 mva7-thc-activetheme-district-theme lang-en wpb-js-composer js-comp-ver-5.4.7 vc_responsive">
  <div class="modalbox-container hide">
    <div class="modal-box">
      <a href="#" class="modalbox-banner" title="Tamil poster">
        <img src="https://cdn.s3waas.gov.in/s38fe0093bb30d6f8c31474bd0764e6ac0/uploads/2021/05/2021051855.jpg" title="Tamil poster" alt="popoup">
      </a>
      <a href="JavaScript:jsvascript:void(0);" class="close-popup" id="s3wassModalpopupClose" data-nonce="0e6c7d0e95" title="Close Popup" aria-label="close popup">&times;</a>
    </div>
  </div>

</body>

</html>

标签： htmljquerycss

解决方案

推荐阅读