小知识，大挑战！本文正在参与“         程序员必备小知识         ”创作活动

本文同时参与 「掘力星计划」         ，赢取创作大礼包，挑战创作激励金

@TOC

关于网页中弹出对话框制作

制作网页的过程中，很多网页都会有点击某个按钮弹出提示框。 制作弹出提示框，主要有两个部分，一是弹出背景层，二是弹出对话框

下面就来用代码介绍一下如何具体实现（以天涯明月刀弹出视频为例）

html部分

<!-- 灰色背景层 S -->
    <div class="gray-warp" id="poplayer">
    </div>
    <!-- 灰色背景层 E -->
    <!-- 视频弹出层 S -->
    <div class="vid-dia" id="video1">
    //关闭按钮
        <a href="javascript:close1video1()" id="close1" ><i class="iconfont">&#xe66d;</i></a>
     //要播放的视频  
        <video src="Isaac Gracie - Silhouettes Of You.mp4" width="1000px" controls autoplay >
        </video>
       
    </div>

css部分

.gray-warp{
    display: none;
   right: 0;
   left: 0;
   top: 0;
   bottom: 0;
   height: 100%;
   width: 100%;
    background-color: rgb(19, 18, 18);
    position: fixed;
    z-index: 5;
    opacity: 0.3;
}
.vid-dia{
    display: none;
    position: fixed;
    z-index: 11;
     width: 1000px;
     height: 565px;
    top: 50%;
  
    left: 50%;

    margin: auto;
    transform: translate(-50%,-50%);
}
.vid-dia a{
    float: right;
     color: black;
    text-decoration: none;
}

js部分

var video1=document.getElementById("video1");
var play1=document.getElementById("play1");
var close1=document.getElementById("close1");
var poplayer=document.getElementById("poplayer");
var poplogin=document.getElementById("poplogin");
//通过对display属性的操作实现
function playvideo1(){
    poplayer.style.display="block";
    video1.style.display="block";
}
function close1video1(){
    video1.style.display="none";
    poplayer.style.display="none";
    poplogin.style.display="none";
}

看下完成效果

弹出之前: 弹出之后

如果要做提示框，可自行在弹出框中加入需要元素

像这样：