From 415a2f6ba02a3553d706aa21cc128b30a1d01188 Mon Sep 17 00:00:00 2001 From: conor Date: Mon, 18 Oct 2021 22:33:12 +0100 Subject: [PATCH] Set up basic modal toggle --- animation/03-pop-up/solution/solution.css | 26 ++++++++++++++++++++++ animation/03-pop-up/solution/solution.html | 11 +++++++-- animation/03-pop-up/solution/solution.js | 15 +++++++++++++ 3 files changed, 50 insertions(+), 2 deletions(-) create mode 100644 animation/03-pop-up/solution/solution.js diff --git a/animation/03-pop-up/solution/solution.css b/animation/03-pop-up/solution/solution.css index e69de29..dec9f46 100644 --- a/animation/03-pop-up/solution/solution.css +++ b/animation/03-pop-up/solution/solution.css @@ -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; +} diff --git a/animation/03-pop-up/solution/solution.html b/animation/03-pop-up/solution/solution.html index 1651eae..66c1d70 100644 --- a/animation/03-pop-up/solution/solution.html +++ b/animation/03-pop-up/solution/solution.html @@ -5,9 +5,16 @@ Popup - + - + + diff --git a/animation/03-pop-up/solution/solution.js b/animation/03-pop-up/solution/solution.js new file mode 100644 index 0000000..732a9f8 --- /dev/null +++ b/animation/03-pop-up/solution/solution.js @@ -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);