diff --git a/index.html b/index.html index f466cfc..2ae5f39 100644 --- a/index.html +++ b/index.html @@ -9,5 +9,23 @@ +

Modal Window Demo

+ + + +
+
+
+
+
+ + +
+
+
+
+ +

+ \ No newline at end of file diff --git a/script.js b/script.js index f9a2009..790a6bd 100644 --- a/script.js +++ b/script.js @@ -1 +1,31 @@ -// Replace me with your JavaScript! \ No newline at end of file +window.addEventListener("load", function(argument) { + + //button that brings up window + var openButton = document.getElementById('openbutton'); + + //button that submits note + var addButton = document.getElementById('addbutton'); + + //button that cancels submission + var cancelButton = document.getElementById('cancelbutton'); + + //modal window to hide/unhide + var modalWindow = document.getElementById('modalwrapper'); + + openButton.addEventListener('click', function(){ + modalWindow.style.display = "block"; + }) + + cancelbutton.addEventListener('click', function(){ + modalWindow.style.display = "none"; + document.getElementById('modal__text').value = null; + }) + + addButton.addEventListener('click', function(){ + modalWindow.style.display = "none"; + document.getElementById('displaynotes').innerHTML = document.getElementById('modal__text').value; + document.getElementById('modal__text').value = null; + }) + + +}); \ No newline at end of file diff --git a/style.css b/style.css index 099a6a7..92de882 100644 --- a/style.css +++ b/style.css @@ -1 +1,32 @@ -/* Replace me with your styles! */ \ No newline at end of file +.modal__background{ + background-color: #000; + opacity: 0.5; + margin-left: -8px; + width: 100vw; + height: 100vh; + position: absolute; + top: 0; + z-index: 2; + display: flex; + justify-content: center; + align-items: center; +} + +.modal__content{ + background-color: #FFF; + opacity: 1.0; + display: flex; + flex-flow: column nowrap; + align-items: flex-end; + justify-content: center; + padding: 15px; +} + +#modal__text{ + height: 300px; + width: 500px; +} + +#modalwrapper{ + display: none; +} \ No newline at end of file