popup to load when website is loaded
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- Copy from -->
<div id="popup" class="close">
<button id="btn-cross">X</button>
<img class="content-popup" src="honeywell-250x500.gif">
</div>
<style>
#popup{
width: 100%;
height: 100%;
position: relative;
}
.content-popup{
position: fixed;
top: 50%;
left:50%;
border-radius: 2rem;
transform: translate(-50%,-50%);
width: 50vh;
height: 90vh;
background-color: rgb(214, 20, 20);
display: flex;
z-index: 2;
box-shadow: grey 1rem 1rem;
}
#btn-cross{
background-color: rgba(55, 55, 255, 0.863);
position: absolute;
color: azure;
font-size: 1.3rem;
top:8vh;
left:70vw;
z-index: 3;
transform: translate(-50%,-50%);
border-radius: 2rem;
height: 2rem;
width: 3rem;
}
.close{
}
</style>
<script>
const close = document.querySelector('.close');
const pop = document.querySelector('#popup');
close.addEventListener('click',() =>{
pop.style.display = 'none'
} )
</script>
<!-- Copy to -->
</body>
</html>