JS Click button Implementation with mask layer of pop-up video effect _javascript skills

This article illustrates the JS click button to achieve a mask layer with the pop-up video effect, involving CSS and JavaScript, share for everyone to reference, the specific content as follows

Final display effect: Click on the red button, there will be a screen pop-up and with mask layer

Click on the yellow area to turn off the video and return to its original state.

Main Page code: main contains a A, control the button displayed. The ID value is set.

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

The following code is used to control the display of the video,. VIDEO-BTN contains the video display area and the right yellow close button (although the yellow close button is a bit ugly).

Id= "Shadow" is used to control the mask layer. The main element is to set the value of the ID after JS can easily invoke the elements.

 <div class= "video-btn" id= "video-btn" >
   <div class= "Video-area" id= "Video-area" ></div>
   <a class= "Video-shut" id= "Video-shut" >x</a>
 </div>
 <div id= "Shadow" ></div>

Let's 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;
    }

Then set the mask layer's 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;
    }

point 1: Here you must set the two div to absolute positioning, leaving it out of the document stream.

Focus 2: mask layer to set the Bottom,left,right,top value of 0 so that the mask layer can tile the entire screen.

point 3: Be sure to set these two div as Display:none. Let the user first is not see these two div, otherwise go in and see these two will be very ugly.

Key 4: to set the value of the Z-index, the yellow button and display video that Div priority must be greater than the mask layer priority, or not click.

Now start JS: The previous five gets the ID assignment. Then respond to the event when you click on the Yellow button.

Click event 1: set the Display:block of the video's Div. Set the Display:block for the mask layer's div.  In the meantime, the video div shows the potato videos. This link is a shared link for Tudou.

Click event 2: When you click on the yellow X button, you should hide the two div. That is, set two div display:none.

<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= ' <embed src= ' http://www.tudou.com/v/bs_lzpxcors/&rpid=818231113&autoplay=true& Resourceid=818231113_04_05_99/v.swf "allowfullscreen=" true "quality=" High "width=" height= "," align= "Middle" Allowscriptaccess= "always" flashvars = "isautoplay=true" type= "Application/x-shockwave-flash" ></embed> ";
  }
  oshut.onclick= function () {
    ovideo.style.display= ' none ';
    Oshadow.style.display= ' None ';
  }
</script>

The above is the entire content of this article, I hope to help you learn.