css

.mask {
    position: fixed;
    z-index: 1099;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.6);
    display: none;
}
.mask .vedio_box {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 960px;
    height: 550px;
    padding: 20px;
    background-color: #FFFFFF;
}
.mask .vedio_box .close {
    position: absolute;
    right: 0;
    top: 0;
    margin-right: -22px;
    margin-top: -22px;
    width: 32px;
    height: 32px;
    border-radius: 32px;
    line-height: 37px;
    text-align: center;
    background-color: #FFFFFF;
}

html

<div class="mask" style="display: none">
   <div class="vedio_box" id="vedio_box_container">
      <div class="close">
         <img src="/templates/images/close2.png"/>
      </div>
      <video class="vedio_src_box" width="960" height="550" src="" autoplay controls></video>
   </div>
</div>

js

$(".videoli dd a").click(function(){
    var vediosrc = $(this).attr('vediosrc');
    $(".vedio_src_box").attr('src',vediosrc);
    $(".mask").show();})

$(".mask .vedio_box .close").click(
    function(){
        $(".mask").hide();
    })


今日吐槽

让烦恼与风去远行;让痛苦陪云去流浪。哼一曲好歌,也许心情,就会轻松许多

Contact ME

TAG Link