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

Set up basic modal toggle

Browse source
This commit is contained in:
conor 2021-10-18 22:33:12 +01:00
parent 84d5b9d887
commit 415a2f6ba0
3 changed files with 50 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -0,0 +1,26 @@
* {
padding: 0;
margin: 0;
}
#popup-container {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.popup-modal {
position: absolute;
width: 30%;
border: 1px solid black;
background-color: white;
display: flex;
justify-content: space-between;
visibility: hidden;
}
.show {
visibility: visible;
}

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

@ -5,9 +5,16 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Popup</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="solution.css" />
</head>
<body>
<div id="popup-container"></div>
<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>
<script src="solution.js"></script>
</body>
</html>

15
animation/03-pop-up/solution/solution.js Normal file
View file

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