javascript - 在 JavaScript 中创建的模态不会在移动设备上消失

Question

我使用 Iframe 组装了一个带有嵌入式视频的模式。 它在桌面上打开和关闭，但在移动设备上不关闭。

代码如下:

var modal = document.querySelector(".modal");
var trigger = document.querySelector(".trigger");
var closeButton = document.querySelector(".close");

function toggleModal() {
  modal.classList.toggle("show-modal");
}

function windowOnClick(event) {
  if (event.target === modal) {
    toggleModal();
    var iframe = document.getElementById('demo');
    var iframeSrc = iframe.src;
    iframe.src = iframeSrc;
  }
}

trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);

img {
  width: 420px;
  height: 345px;
  border-radius: 10px;
}

.modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: scaleX(1.1) scaleY(1.1);
  transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}

.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 10px;
}

iframe {
  width: 420px;
  height: 345px;
  border: 0px;
  border-radius: 10px;
  box-shadow: 0 0 20px 0px black;
}

.close-button:hover {
  background-color: darkgray;
}

.show-modal {
  opacity: 1;
  visibility: visible;
  transform: scaleX(1.0) scaleY(1.0);
  transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}

div {
  display: inline-block;
  position: relative;
}

img {
  max-width: 100%;
}

.thumb {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 96px;
  height: 96px;
}

.round-button {
  box-sizing: border-box;
  display: block;
  width: 80px;
  height: 80px;
  padding-top: 14px;
  padding-left: 8px;
  line-height: 20px;
  border: 6px solid #fff;
  border-radius: 50%;
  color: #f5f5f5;
  text-align: center;
  text-decoration: none;
  background-color: #3fa6d9;
  font-size: 20px;
  font-weight: bold;
  transition: all 0.3s ease;
}

.round-button:hover {
  background-color: #2b7dff;
  box-shadow: 0px 0px 1px rgba(255, 255, 10, 1);
  text-shadow: 0px 0px 1px rgba(255, 255, 1, 1);
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="trigger ">
  <img src="https://i.ytimg.com/vi/2VLDkNjAUBU/maxresdefault.jpg" />
  <a class="round-button thumb"><i class="fa fa-play fa-2x"></i></a>
</div>
<div class="modal">
  <div class="modal-content close">
  <iframe id="demo" src="https://www.youtube.com/embed/CxnaPa8ohmM"></iframe>
  </div>
</div>

有没有办法在不使用像 Bootstrap 这样的库的情况下使其在移动设备上运行？

我只需要能够在手机上使用模式关闭窗口。

请帮忙。

Answer 1

Simple X 可以解决您的问题。在给定的示例中，我使用了 font-awesome 中的符号。

var modal = document.querySelector(".modal");
var trigger = document.querySelector(".trigger");
var closeButton = document.getElementById("closediv");

function toggleModal() {
  modal.classList.toggle("show-modal");
}

function windowOnClick(event) {
  if (event.target === modal) {
    toggleModal();
    var iframe = document.getElementById('demo');
    var iframeSrc = iframe.src;
    iframe.src = iframeSrc;
  }
}

trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);

img {
  width: 420px;
  height: 345px;
  border-radius: 10px;
}

.modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: scaleX(1.1) scaleY(1.1);
  transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}

.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 10px;
}

iframe {
  width: 420px;
  height: 345px;
  //border-style: solid;
  //border-width: thin;
  border: 0px;
  border-radius: 10px;
  box-shadow: 0 0 20px 0px black;
}

.close-button:hover {
  background-color: darkgray;
}

.show-modal {
  opacity: 1;
  visibility: visible;
  transform: scaleX(1.0) scaleY(1.0);
  transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}

div {
  display: inline-block;
  position: relative;
}

img {
  max-width: 100%;
}

.thumb {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 96px;
  height: 96px;
  cursor: pointer;
}

.round-button {
  box-sizing: border-box;
  display: block;
  width: 80px;
  height: 80px;
  padding-top: 14px;
  padding-left: 8px;
  line-height: 20px;
  border: 6px solid #fff;
  border-radius: 50%;
  color: #f5f5f5;
  text-align: center;
  text-decoration: none;
  background-color: #3fa6d9;
  font-size: 20px;
  font-weight: bold;
  transition: all 0.3s ease;
}

.round-button:hover {
  background-color: #2b7dff;
  box-shadow: 0px 0px 1px rgba(255, 255, 10, 1);
  text-shadow: 0px 0px 1px rgba(255, 255, 1, 1);
}

.fa {
  color: white;
  cursor: pointer;
  display: block;
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="trigger">
  <img src="https://i.ytimg.com/vi/2VLDkNjAUBU/maxresdefault.jpg" />
  <a class="round-button thumb"><i class="fa fa-play fa-2x"></i></a>
</div>
<div class="modal">
  <div class="modal-content" id="closediv">
    <i class="fa fa-times fa-2x " aria-hidden="true"></i>
    <iframe id="demo" src="https://www.youtube.com/embed/-3wlroM2gZ8" allowfullscreen="allowfullscreen" mozallowfullscreen="mozallowfullscreen" msallowfullscreen="msallowfullscreen" oallowfullscreen="oallowfullscreen" webkitallowfullscreen="webkitallowfullscreen"></iframe>
  </div>
</div>