I'm trying to make an overlay design, I have a button when clicked, a new overlay div will be displayed on top my main div , how ever I can't seem to figure out why the overlay div I have created is not appearing. I have watch tutorials and search similar situation like mine but I cant understand why it is not showing.
This is my html page :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan+2|Liu+Jian+Mao+Cao&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="thiscss/randomqoutes.css">
<title>Document</title>
</head>
<body>
<div class="container">
<h2>RCaT11</h2>
<div class="qoutewrapper">
<h1>Have an Inspirational day!</h1>
<button id="btn">Genererate Qoute</button>
</div>
<div class="overlaycontainer">
</div>
</div>
</body>
<script type="text/javascript" src="javascript/randomqoutes.js"></script>
</html>
this is my css file, I have set the "overlaycontainer" class display to none to that it will not show up first until the button is clicked :
body {
background: linear-gradient(to left, #ED8F20, #EBD626);
margin: 0;
padding: 50px;
}
.container {
display: flex;
}
.qoutewrapper {
font-family: 'Liu Jian Mao Cao', cursive, sans-serif;
width: 900px;
height: 250px;
margin: 0 auto;
margin-top: 10%;
padding: 10px;
display: flex
}
.qoutewrapper h1 {
white-space: nowrap;
font-weight: 700;
font-size: 70px;
margin: 0 auto;
position: relative;
left: 90px;
margin-top: 50px;
}
h2 {
font-family: 'Liu Jian Mao Cao', cursive, sans-serif;
font-size: 2em;
position: absolute;
left: 90%;
color: red;
float: right;
}
.container button {
color: rgba(26, 25, 25, 0.897) !important;
text-transform: uppercase;
background: none;
padding: 12px;
border: 2px dotted rgba(26, 25, 25, 0.897) !important;
font-weight: 800;
float: right;
margin-top: 200px;
}
.container button:hover {
color: #EBD626 !important;
background: rgba(26, 25, 25, 0.897);
border-color: none !important;
transition: all 0.4s ease 0s;
display: flex;
}
.overlaycontainer {
width: 100%;
height: 100%;
background-color: black;
opacity: 0.7;
display: none;
}
this is my javascript file, I have written that when button is clicked the display will be set to "flex" to display the "overlaycontainer", however it is not showing up,
document.getElementById('btn').addEventListener('click', function() {
document.querySelector('.overlaycontainer').style.display = "flex";
})
Aucun commentaire:
Enregistrer un commentaire