需求：在原有在頁面上添加一個按鈕，點擊彈出視頻播放。
看到的第一單應是button，點擊加一個彈出框的組件。
然后我就開始想。。。。
彈出框是什么
JavaScript里好像沒有教過默認彈出框的代碼吧
於是我打開了菜鳥教程。
//警告框
window.alert("sometext");
//確認框
window.confirm("sometext");
//提示框
window.prompt("sometext","defaultvalue");
警告框
確認框
提示框
我尋思，這個默認彈框里面的樣式改起來一定很麻煩...而且這個彈窗和我想的樣子也不太一樣。於是開始csdn大法。
看了一些【復雜、亂七八糟、奇奇怪怪的例子之后】忽然就反應過來，所謂的彈窗，可以理解為，本來就在這個頁面上，並且優先級【堆疊順序】很高的一個框框。然后讓他
display : none;
這樣一開始的時候是隱藏的，點擊按鈕的時候綁定一個show ( ) 事件讓他出現。嗯。。。道理明白了，但是具體怎么操作
首先我們需要三個樣式，分別控制視頻、關閉按鈕還有遮罩層。【當然你可以再加一個按鈕button的樣式。demo這里的按鈕就就用了原生的button】
#show-video {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 999 !important;
background: rgba(0, 0, 0, .25);
display: none;
}
.video-close {
width: 45px;
height: 45px;
color: #211d1e;
position: absolute;
right: 118px;
top: 113px;
z-index: 999;
cursor: pointer;
}
#show-video video {
border: solid white 5px;
border-radius: 10px;
outline: none;
max-width: 85%;
max-height: 70vh;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 20px 40px rgb(0 0 0 / 50%);
}
JS部分還是用了jQuery來寫，所以記得引入一下庫。沒有用toggle是因為，toggle是同一個按鈕控制出現消失，但是這里 點擊視頻出現 和 關掉視頻是兩個不同的按鈕，所以還是寫兩個方法分別控制一下出現 show () 和隱藏 hide（）。
$(function() {
$(".view_more_video").click(function() {
$("#show-video").show();
})
$(".video-close").click(function() {
$("#show-video").hide();
})
})
<!--完整代碼-->
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>點擊按鈕展示彈窗視頻播放器</title>
</head>
<style type="text/css">
#show-video {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 999 !important;
background: rgba(0, 0, 0, .25);
display: none;
}
.video-close {
width: 45px;
height: 45px;
color: #211d1e;
position: absolute;
right: 118px;
top: 113px;
z-index: 999;
cursor: pointer;
}
#show-video video {
outline: none;
max-width: 85%;
max-height: 70vh;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 20px 40px rgb(0 0 0 / 50%);
}
</style>
<body>
<button class="view_more_video">點擊觀看</button>
<div id="show-video">
<a class="video-close">
<span>
<svg t="1614676844098" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2082"
width="30" height="30">
<path d="M591.506286 511.853714l417.133714-416.914285a54.601143 54.601143 0 0 0 0-76.8l-2.267429-2.267429a54.601143 54.601143 0 0 0-76.8 0L512.438857 433.481143 95.305143 15.798857a54.601143 54.601143 0 0 0-76.8 0L16.237714 18.066286a53.577143 53.577143 0 0 0 0 76.8l417.097143 416.987428L16.201143 929.097143a54.601143 54.601143 0 0 0 0 76.8l2.267428 2.267428a54.601143 54.601143 0 0 0 76.8 0l417.170286-417.060571 417.097143 417.097143a54.601143 54.601143 0 0 0 76.8 0l2.267429-2.267429a54.601143 54.601143 0 0 0 0-76.8z"
p-id="2083" fill="#e6e6e6"></path>
</svg>
</span>
</a>
<video controls>
<source src="http://evp.chinaceotv.com/cms-video/20211012/100510-12345678XN2108.mp4">
</video>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
$(".view_more_video").click(function() {
$("#show-video").show();
})
$(".video-close").click(function() {
$("#show-video").hide();
})
})
</script>
</body>
</html>