Click the button to eject the video and have a mask layer effect

Involves CSS and JavaScript.

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

Click the yellow area to close the video and return to its original state.

Page main code: Maincontains a, control the display of the button. The ID value is set.

<class= "main">    <href= " javascript:; " class = "Video" ID = "Video" ></ a > </ Div >

The following code is used to control the video display effect,. 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 key is to set the ID value of each element  after JS can be convenient to invoke each element.

1 <Divclass= "Video-btn"ID= "Video-btn">2     <Divclass= "Video-area"ID= "Video-area"></Div>3     <aclass= "Video-shut"ID= "Video-shut">X</a>4 </Div>5 <DivID= "Shadow"></Div>

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

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

Focus 1: Be sure to set the two div to absolute positioning, leaving it out of the document flow.

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

Focus 3: Be sure to set these two div to Display:none. Let the user at the beginning is not see these two div, otherwise in the first to see these two will be very ugly.

Focus 4: To set the value of the Z-index, the yellow button and the video display the priority of the div must be greater than the priority of the mask layer, or it cannot be clicked.

Now start JS. The first five gets the ID assignment. Then respond to the event when the yellow button is clicked.

Click event 1: Set Display:block the div where the video is located. Sets the div of the matte layer display:block.  At the same time, video of the potato is displayed in the viewport div. This link is a shared link for Tudou.

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

1 <Script>2     varobtn=document.getElementById ('Video');3     varOvideo=document.getElementById ('video-btn');4     varOatn=document.getElementById ('Video-area');5     varOshut=document.getElementById ('Video-shut');6     varOshadow=document.getElementById ('Shadow');7 Obtn.onclick=function () {8 Ovideo.style.display='Block';9 Oshadow.style.display='Block';Ten 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> '; One     } A Oshut.onclick= function () { - Ovideo.style.display='None'; - Oshadow.style.display='None'; the     } - </Script>

Click the button to eject the video and have a mask layer effect