干杯伙計們，我會從一開始就提到我是這個世界的新手，我希望你能就以下問題提供一些幫助：
我有一個按鈕。單擊時，按鈕會打開一個彈出視窗并自動播放位于彈出視窗中的視頻。我想做的是以下內容：
當用戶單擊按鈕時，彈出視窗將觸發并且視頻將自動播放。當用戶單擊關閉“X”按鈕時，彈出視窗應該關閉并且視頻應該停止/暫停。
我有以下代碼：
HTML
<div class="video-button-container">
<img src="media/video-bg.png">
<a href="#" onclick="toggle();">
<img src="media/play.png" class="play">
</a>
</div>
<div class="video-container">
<img src="media/close.png" class="close" onclick="close();">
<video src="media/video.mp4" controls="true" class="video"></video>
</div>
CSS
.video-button-container {
position: absolute;
top: 70px;
right: 70px;
}
.play {
position: absolute;
top: 25%;
right: 35%;
}
.video-container {
position: absolute;
right: 0;
top: 0;
z-index: 10000;
background: rgba(0, 0, 0, 0.25);
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
visibility: hidden;
opacity: 0;
}
.video-container.active {
visibility: visible;
opacity: 1;
}
.video-container video {
position: relative;
max-width: 900px;
outline: none;
}
.close {
position: absolute;
top: 80px;
right: 20px;
cursor: pointer;
max-width: 32px;
}
@media (max-width: 991px) {
.video-container video {
max-width: 90%;
}
}
JS
var videoElem = document.querySelector(".video-container video");
var trailerElem = document.querySelector(".video-container")
function toggle() {
trailerElem.classList.add("active");
videoElem.play();
videoElem.currentTime = 0;
}
function close() {
trailerElem.classList.remove("active");
videoElem.pause();
videoElem.currentTime = 0;
}
有人可以告訴我，我做錯了什么嗎？祝你今天過得愉快！
uj5u.com熱心網友回復：
該close.png元素沒有系結任何事件，因為它不在visible加載頁面時，因此您必須在加載后系結事件。
/* function close() {
trailerElem.classList.remove("active");
videoElem.pause();
videoElem.currentTime = 0;
}
*/
window.onload = function () {
document.getElementsByClassName("close")[0]
.addEventListener("click", function (e) {
trailerElem.classList.remove("active");
videoElem.pause();
videoElem.currentTime = 0;
});
};
uj5u.com熱心網友回復：
我知道如果您在外部視窗中制作視頻，您可以關閉該視窗本身，這可以方便地調整視窗大小等等。這意味著您可以檢測到何時按下按鈕，您可以觸發它關閉視窗并執行 x。（我意識到你已經做到了）
我知道您可以使用 window.close() 關閉彈出視窗，所以這里有一個部分示例：
var popup;
function onReadyFunc() {
popup = window.open("https://google.com", "_blank", "top=500,left=500,width=400,height=400");
}
function closePopup() {
popup.close()
}
并且您會在主頁加載時呼叫 onReadyFunc() ，否則您可能必須在視頻頂部制作一個按鈕，以便在單擊它時不太確定是否可以檢測到外部按鈕，盡管如果您有權更改類/id 那么您肯定可以在單擊以執行關閉視窗等功能時添加一個事件。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/466622.html
標籤：javascript html jQuery css 弹出窗口