【js基础】原生js实现模态弹窗效果


<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
<style>
    a{
        display: block;
    }
    a>.a{
        position: relative;
        left:-145px;
    }
    #mask{
     background: #000;
     opacity: 0.65;
     width: 100%;
     position: absolute;
     left: 0;
     top: 0;
     bottom:0;
     z-index: 1000;
}
#vide{
    position: absolute;
    /*display: block;*/
    /*background-color: red;*/
    width:800px;
    height:600px;
    z-index:1001;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}
/*vedio{
    width:800px;
    height:600px;
}*/
#close{
    position:absolute;
    top:10px;
    right:10px;
    cursor: pointer;
    width:30px;
    height:30px;
    z-index: 1001;
}
style> 
head>
<body>
    
    <a href="javascript:;" id="video">
         <img src="icon/about_b_buttom.png" alt="">
         <img class="a" src="icon/about_b.png" alt="">
    a>

body>
<script>
var cWidth=document.documentElement.clientWidth;
var cHeight=document.documentElement.clientHeight;
// 获取客户区大小
var v=document.getElementById("video");
function TurnOnVedio(){ 
    var oMask=document.createElement("div");
    oMask.id="mask";
    document.body.appendChild(oMask);
   //插入遮障 
    var modal=document.createElement("div");
    modal.id="vide";
    modal.innerHTML='
X
'
;//插入关闭X形状和视频 var oVedio=document.createElement("video"); modal.appendChild(oVedio); document.body.appendChild(modal); var oClose=document.getElementById("close"); //关闭弹窗 oMask.onclick=oClose.onclick=function(){ document.body.removeChild(oMask); document.body.removeChild(modal); }; } window.onload=function(){ v.onclick=function(){ TurnOnVedio(); }; }
script> html>

【js基础】原生js实现模态弹窗效果_第1张图片

【js基础】原生js实现模态弹窗效果_第2张图片

你可能感兴趣的:(【js基础】原生js实现模态弹窗效果)