本文举例说明了通过js点击按钮实现的带有蒙版图层的弹出视频效果，涉及css和JavaScript，将分享给大家参考。具体内容如下。

最终显示效果：点击红色按钮，会弹出一个带有蒙版图层的视频画面。

单击黄色区域关闭视频并返回其原始状态。

页面主代码：Main主要包含一个控制显示的按钮。设置id值。

div class=' main ' a href=' JavaScript :'Class='video' id='video'/a/div以下代码用于控制视频显示效果.video-btn包括视频显示区和右侧的黄色关闭按钮(虽然黄色关闭按钮有点难看)。

Id='shadow '用于控制遮罩层。主要是为每个元素设置id的值，然后js可以方便的调用每个元素。

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 id=' shadow '/div我们来看看css。

首先设置视频btn区域。video-BTN { position : absolute；宽度width:600pxheight: 300px背景：黑色；top :50%；左侧：50%；边距-top :-150 px；边距-left :-300 px；display:无；z-index : 101；} .视频区{ float:left宽度width:500pxheight: 300px背景：红色；}.视频关闭{ height:100px宽度width:100pxfont-size :40 px；颜色：粉色；float:left文本对齐：中心；/*线高： 50px；*/background:黄色；display:块；padding-top :30 px；}然后设置遮罩层的css。

# shadow { position: absoluteopacity: 0.5filter:alpha(不透明度=50)；底部：0；left : 0；right : 0；top : 0；背景：黑色；z-index : 100；display:无；}第一点：在这里，两个div必须设置为绝对定位，这样才能与文档流分离。

2.遮罩层应该将底部、左侧、右侧和顶部的值设置为0，以便遮罩层可以平铺整个屏幕。

3.请务必将这两个div设置为显示：无。让用户一开始看不到这两个div，否则进入后会很难看。

4.要设置z-index的值，显示视频的黄色按钮和div的优先级必须高于蒙版图层的优先级，否则无法点击。

现在开始js:前五个获得id分配。然后在单击黄色按钮时响应事件。

单击事件1:将视频所在的div设置为显示：block。将遮罩层所在的div设置为显示：block。同时，土豆视频显示在视频div中。这个链接是土豆的分享链接。

点击事件2:当你点击黄色的x按钮时，你应该隐藏这两个div。也就是说，设置显示：无两个div:无。

script var obt n=document . getelementbyid(' video ')；var Ovi deo=document . getelementbyid(' video-BTN ')；var oatn=document . getelementbyid('视频区')；var Osh ut=document . getelementbyid(' video-shut ')；var oshadow=document . getelementbyid(' shadow ')；obt n . onclick=function(){ Ovi deo . style . display=' block '；OSHA Dow . style . display=' block '；oatn . innerhtml=' embed src=' http :http://www . tudou.com/v/Bs _ lZPxcoRs/rpid=818231113 autoplay=true resourceid=818231113 _ 04 _ 05 _ 99/v . swf ' allow full screen=' true ' quality=' high ' width=' 500 ' height=' 300 ' align=' middle ' allowscriptaces=' alwashvarvarvarscreen '} Osh ut . onclick=function(){ Ovi deo . style . display=' none '；OSHA Dow . style . display=' none '；}/脚本以上就是本文的全部内容，希望对大家的学习有所帮助。