punkfairie/odin-css-exercises
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Set up opacity transition

Browse source
This commit is contained in:
conor 2021-10-20 21:40:44 +01:00
parent 415a2f6ba0
commit 660d23d9eb
3 changed files with 29 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
animation/03-pop-up/solution/solution.css
View file

@ -3,12 +3,25 @@
margin: 0; margin: 0;
} }
#popup-container { .popup-container {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
display: flex; background-color: #ffffff;
justify-content: center; opacity: 1;
align-items: center; transition: background-color 0.5s ease-in, opacity 0.5s ease-in;
}
.popup-container.show {
background-color: #000000;
opacity: 40%;
}
#trigger-modal,
.popup-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
} }
.popup-modal { .popup-modal {
@ -21,6 +34,6 @@
visibility: hidden; visibility: hidden;
} }
.show { .popup-modal.show {
visibility: visible; visibility: visible;
} }

6
animation/03-pop-up/solution/solution.html
View file

@ -8,13 +8,13 @@
<link rel="stylesheet" href="solution.css" /> <link rel="stylesheet" href="solution.css" />
</head> </head>
<body> <body>
<div id="popup-container"> <div class="popup-container">
<button id="open-modal">Click Me!</button> <button id="trigger-modal">Click Me!</button>
</div>
<div class="popup-modal"> <div class="popup-modal">
<p>Hey there!</p> <p>Hey there!</p>
<button id="close-modal">X</button> <button id="close-modal">X</button>
</div> </div>
</div>
<script src="solution.js"></script> <script src="solution.js"></script>
</body> </body>
</html> </html>

6
animation/03-pop-up/solution/solution.js
View file

@ -1,14 +1,18 @@
const openButton = document.getElementById('open-modal'); const openButton = document.getElementById('trigger-modal');
const closeButton = document.getElementById('close-modal'); const closeButton = document.getElementById('close-modal');
function openModal() { function openModal() {
const container = document.querySelector('.popup-container');
const modalDiv = document.querySelector('.popup-modal'); const modalDiv = document.querySelector('.popup-modal');
modalDiv.classList.add('show'); modalDiv.classList.add('show');
container.classList.add('show');
} }
function closeModal() { function closeModal() {
const container = document.querySelector('.popup-container.show');
const modalDiv = document.querySelector('.popup-modal.show'); const modalDiv = document.querySelector('.popup-modal.show');
modalDiv.classList.remove('show'); modalDiv.classList.remove('show');
container.classList.remove('show');
} }
openButton.addEventListener('click', openModal); openButton.addEventListener('click', openModal);