这里写自定义目录标题
关于网页中弹出对话框制作下面就来用代码介绍一下如何具体实现（以天涯明月刀弹出视频为例）html部分css部分js部分看下完成效果
如果要做提示框，可自行在弹出框中加入需要元素
关于网页中弹出对话框制作
制作网页的过程中，很多网页都会有点击某个按钮弹出提示框。 制作弹出提示框，主要有两个部分，一是弹出背景层，二是弹出对话框
下面就来用代码介绍一下如何具体实现（以天涯明月刀弹出视频为例）
html部分
<div class="gray-warp" id="poplayer">
</div>
<div class="vid-dia" id="video1">
//关闭按钮
<a href="javascript:close1video1()" id="close1" ><i class="iconfont"></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");
function playvideo1(){
poplayer
.style
.display
="block";
video1
.style
.display
="block";
}
function close1video1(){
video1
.style
.display
="none";
poplayer
.style
.display
="none";
poplogin
.style
.display
="none";
}
看下完成效果
弹出之前: 弹出之后
如果要做提示框，可自行在弹出框中加入需要元素
像这样：
