带有可映射区域的自适应灯箱

Question

我创建了一个灯箱，您可以在其中单击某个区域，然后调出灯箱，然后在灯箱图像中添加了4个链接，以方便客户前往不同的地方。该网站的内容框架设置为1400px。我的问题是，初始图像和灯箱图像上的地图没有响应。我希望在台式机和移动设备上获得相同的体验。任何帮助将非常感激。谢谢。

var modalImg = document.getElementById("img01");
$(".lightbox").on("click", function(e) {
  e.preventDefault();
  $("#myModal").css("display", "block");
});

$(".close").on("click", function(e) {
  e.preventDefault();
  $("#myModal").css("display", "none");
});

/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.7);
  /* Black w/ opacity */
}


/* Modal Content (image) */

.container {
  margin: auto;
  display: block;
  width: 70%;
  max-width: 700px;
}


/* The Close Button */

.close {
  position: relative;
  top: 35px;
  float: right;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  cursor: pointer;
}

.modal-content {
  width: 100%;
}

<img src="https://xcdn.co.uk/content/common/items/default/default/sitemaps/G22/storefronts/next3step/3/1.jpg" alt="Planets" usemap="#planetmap" />

<map name="planetmap">
    <area shape="rect" coords="898,143,1062,186" href="/secure/account ">
<area class="lightbox" shape="rect" coords="871,195,1087,221" href="#">

</map>

<!-- The Modal -->
<div id="myModal" class="modal">
  <div class="container">
    <span class="close">&times;</span>
    <img class="modal-content" id="img01" src="https://xcdn.co.uk/content/common/items/default/default/sitemaps/G22/storefronts/credit-lightbox/credit-lightbox.jpg">
  </div>
</div>