怎么用js做出，点击一个按钮,弹出一个遮罩层,5秒后自己关闭.的效果

JavaScript074

怎么用js做出，点击一个按钮,弹出一个遮罩层,5秒后自己关闭.的效果,第1张

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

#cover{

position: fixed

top: 0

left: 0

height: 100%

width: 100%

background-color: rgba(0,0,0,0.3)

display:none

z-index:1000

}

</style>

</head>

<body>

<button>这是一个按钮</button>

<div id="cover">这是一个遮罩</div>

<script>

var btn=document.getElementsByTagName('button')[0]

btn.addEventListener('click',function(){

var cover=document.getElementById('cover')

cover.style.display='block'

setTimeout(function(){

cover.style.display='none'

},5000)

})

</script>

</body>

</html>

这个按钮可以在弹出来的时候，就放在图片所包裹的层里面，然后用js控制关闭的单机事件就行了，如果纯用js添加一个关闭按钮可以这样操作：

1。找到图片的dom对象，2.在图片外围包裹一层div，3,设置此div的属性position：relative，4.创建按钮元素，5，插入此按钮到div中 6，给此按钮css属性，position：absolute，right：-10px，top：-10px；具体可以微调，以上可以用jquery的api实现，大致会用以下api，wrap()，append()，css()。