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;
}
#popup-container {
.popup-container {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #ffffff;
opacity: 1;
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 {
@ -21,6 +34,6 @@
visibility: hidden;
}
.show {
.popup-modal.show {
visibility: visible;
}

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

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

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');
function openModal() {
const container = document.querySelector('.popup-container');
const modalDiv = document.querySelector('.popup-modal');
modalDiv.classList.add('show');
container.classList.add('show');
}
function closeModal() {
const container = document.querySelector('.popup-container.show');
const modalDiv = document.querySelector('.popup-modal.show');
modalDiv.classList.remove('show');
container.classList.remove('show');
}
openButton.addEventListener('click', openModal);