Js click the button to implement code instance analysis of the pop-up video with a mask layer

This article describes how to click a button in js to bring up a video with a mask layer. For more information about how to click a button in js to bring up a video with a mask layer, see the next article, for more information, see

This article explains how to click a button in js to bring up a video with a mask layer, involving css and JavaScript. The content is as follows:

Final display: Click the red button to display the screen with a mask layer.

Main Code of the page: main mainly contains a, which controls the displayed button. Set an id value.

The following code controls the video display effect. video-btn contains the video display area and the yellow button on the right (although the yellow button is ugly ).

Id = "shadow" is used to control the mask layer. It is mainly to set the id value for each element. Then, JavaScript can easily call each element.

 
   
   x 
 

Next let's take a look at the css

First, set the video-btn area.

.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;    }

Set the css of the mask layer.

 #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;    }

Key 1:Here, we must set the two p as absolute positions to let them break away from the document stream.

Key 2:You must set bottom, left, right, and top to 0 for the mask layer to tile the entire screen.

Key 3:Make sure to set the two p values to display: none. In the beginning, the user will not see the two p; otherwise, it will be ugly to see them as soon as they enter.

Key 4:To set the value of z-index, the priority of the yellow button and the p that shows the video must be higher than that of the mask layer. Otherwise, the video cannot be clicked.

Start js now: assign values to the first five retrieved IDs. Then, respond to the event when you click the yellow button.

Click Event 1:Set the p of the video to display: block. Set the p where the mask layer is located to display: block. At the same time, the potato video is displayed in the video p. This is the sharing link of Tudou.

Click Event 2:When you click the yellow x button, you should hide the two p. Set the display: none of two p values.

《script》  var obtn=document.getElementById('video');  var ovideo=document.getElementById('video-btn');  var oatn=document.getElementById('video-area');  var oshut=document.getElementById('video-shut');  var oshadow=document.getElementById('shadow');  obtn.onclick=function () {    ovideo.style.display='block';    oshadow.style.display='block';    oatn.innerHTML='    ';  }  oshut.onclick= function () {    ovideo.style.display='none';    oshadow.style.display='none';  }《script》