js點擊按鈕實現帶遮罩層的彈出視頻效果的代碼實例分析

來源：懂視網責編：小采時間：2020-11-27 21:47:34

js點擊按鈕實現帶遮罩層的彈出視頻效果的代碼實例分析

js點擊按鈕實現帶遮罩層的彈出視頻效果的代碼實例分析:這篇文章主要介紹了js點擊按鈕實現帶遮罩層的彈出視頻效果,需要的朋友可以參考下本文實例講解了js點擊按鈕實現帶遮罩層的彈出視頻效果，涉及到css以及JavaScript，分享給大家供大家參考，具體內容如下最終顯示效果：點擊紅色按鈕，會有視屏彈出并帶有遮罩層

推薦度：

點擊下載本文 文檔為doc格式

導讀js點擊按鈕實現帶遮罩層的彈出視頻效果的代碼實例分析:這篇文章主要介紹了js點擊按鈕實現帶遮罩層的彈出視頻效果,需要的朋友可以參考下本文實例講解了js點擊按鈕實現帶遮罩層的彈出視頻效果，涉及到css以及JavaScript，分享給大家供大家參考，具體內容如下最終顯示效果：點擊紅色按鈕，會有視屏彈出并帶有遮罩層

這篇文章主要介紹了js點擊按鈕實現帶遮罩層的彈出視頻效果,需要的朋友可以參考下

本文實例講解了js點擊按鈕實現帶遮罩層的彈出視頻效果，涉及到css以及JavaScript，分享給大家供大家參考，具體內容如下

最終顯示效果：點擊紅色按鈕，會有視屏彈出并帶有遮罩層

點擊黃色區域可以關閉視頻并回到最初的狀態。

頁面主要代碼：main中主要包含一個a，控制顯示的按鈕。設置有id值。

<p class="main">
 <a href="javascript:;" class="video" id="video"></a>
</p>

以下代碼就是用來控制視頻的顯示效果，.video-btn 包含了視頻顯示區域以及右邊黃色關閉按鈕（雖然黃色關閉按鈕有點丑）。

id="shadow"用來控制遮罩層。主要是對各元素設置id的值后面js就可以方便的調用各元素。

 <p class="video-btn" id="video-btn">
 <p class="video-area" id="video-area"></p>
 <a class="video-shut" id="video-shut">x</a>
 </p>
 <p id="shadow"></p>

下面來看一下有關css

首先設置video-btn區域。

.video-btn{
 position: absolute;
 width:600px;
 height: 300px;
 background:black;
 top:50%;
 left: 50%;
 margin-top: -150px;
 margin-left:-300px;
 display: none;
 z-index: 101;
 }
 .video-area{
 float:left;
 width:500px;
 height: 300px;
 background:red;
 }
.video-shut{
 height:100px;
 width:100px;
 font-size:40px;
 color:pink;
 float:left;
 text-align: center;
 /*line-height: 50px;*/
 background: yellow;
 display: block;
 padding-top:30px;
 }

然后設置遮罩層的css

 #shadow{
 position: absolute;
 opacity: 0.5;
 filter:alpha(opacity=50);
 bottom:0;
 left: 0;
 right: 0;
 top: 0;
 background:black;
 z-index: 100;
 display: none;
 }

重點1：此處一定把兩個p設為絕對定位，讓其脫離文檔流。

重點2：遮罩層要設置bottom，left，right，top值為0 這樣遮罩層就可以平鋪整個屏幕了。

重點3：一定要把這兩個p設為display：none。讓用戶一開始是看不到這兩個p ，否則一進去就看到這兩個會很丑。

重點4：要設置z-index的值，黃色按鈕和顯示視頻那個p的優先級一定要比遮罩層的優先級大，不然點擊不了。

現在開始js：前面五個獲取id賦值。然后在點擊黃色按鈕時響應事件。

點擊事件1：將視頻所在的p設置display：block。將遮罩層所在p設置display：block。同時，視屏p內顯示土豆視頻。此鏈接為土豆網的分享鏈接。

點擊事件2：在點擊黃色x按鈕時，應該將這兩個p隱藏起來。即設置兩個p的display：none。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com