2
iFrameを使用して動画を埋め込んだモーダルを作成しました。 デスクトップで開いたり閉じたりしますが、モバイルでは閉じません。JavaScriptで作成されたモーダルはモバイルでは表示されません
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>それはブートストラップのようなライブラリを使用せずに、モバイル上で動作するようにする方法があります：ここで
はコードがありますか？
携帯電話ではモーダルでウィンドウを閉じることができます。
助けてください。