фон слоя по времени

[Sergey39]

Здравствуйте!

Как создать слой который будет появляться при загрузке страницы и исчезать после 10 сек.?

начало так
if (document.getElementById(video-background).style.display == 'none')
document.getElementById(video-background).style.display = 'block';
else
document.getElementById(video-background).style.display = 'none';

не работает

[Audaxviator]

video-background в кавычки

[Sergey39]

не работает

[Nexus]

<div>Content</div>
<div id="overlay">Overlay</div>
<style>
#overlay{
	display:none;
	position:fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	margin:auto;
	background:rgba(255,255,255,.5);
	padding:30px;
}
#overlay.open{
	display:block;
}
</style>
<script>
(function(){
	const overlay=document.getElementById('overlay');
	overlay.classList.add('open');
	setTimeout(()=>overlay.classList.remove('open'),10*1000);
})();
</script>

[Sergey39]

не работает что не так

<script type="text/javascript" >
(function(){
const videobackground=document.getElementById('videoback ground');
videobackground.classList.add('open');
setTimeout(()=>videobackground.classList.remove('o pen'),10*1000);
});
</script>

#videobackground {
display:none;
}
#videobackground.open{
display:block;
}

<div id="videobackground" class="video-background">
</div>

[Nexus]

Sergey39,

document.addEventListener('DOMContentLoaded',function(){
    const overlay=document.getElementById('overlay');
    overlay.classList.add('open');
    setTimeout(()=>overlay.classList.remove('open'),10*1000);
});

[Sergey39]

так работает, спасибо!

[Sergey39]

плавное закрытие возможно?

[Nexus]

Sergey39, возможно.

[Sergey39]

как?)