HacktoberfestSIT · caro-oviedo · Oct 4, 2021 · Oct 4, 2021 · Oct 4, 2021 · Oct 4, 2021
diff --git a/JavaScript/modal/.gitingore b/JavaScript/modal/.gitingore
@@ -0,0 +1,35 @@
+
+# Created by https://www.toptal.com/developers/gitignore/api/linux,git
+# Edit at https://www.toptal.com/developers/gitignore?templates=linux,git
+
+### Git ###
+# Created by git for backups. To disable backups in Git:
+# $ git config --global mergetool.keepBackup false
+*.orig
+
+# Created by git when using merge tools for conflicts
+*.BACKUP.*
+*.BASE.*
+*.LOCAL.*
+*.REMOTE.*
+*_BACKUP_*.txt
+*_BASE_*.txt
+*_LOCAL_*.txt
+*_REMOTE_*.txt
+
+### Linux ###
+*~
+
+# temporary files which can be created if a process still has a handle open of a deleted file
+.fuse_hidden*
+
+# KDE directory preferences
+.directory
+
+# Linux trash folder which might appear on any partition or disk
+.Trash-*
+
+# .nfs files are created when an open file is removed but is still being accessed
+.nfs*
+
+# End of https://www.toptal.com/developers/gitignore/api/linux,git
diff --git a/JavaScript/modal/README.md b/JavaScript/modal/README.md
@@ -0,0 +1,6 @@
+# Modal
+Code to create a modal window using JavaScript and CSS.
+
+<img src="img/modal1.png" width="600px" heigth= "auto">
+<img src="img/modal2.png" width="600px" heigth= "auto">
+
diff --git a/JavaScript/modal/img/modal1.png b/JavaScript/modal/img/modal1.png
diff --git a/JavaScript/modal/img/modal2.png b/JavaScript/modal/img/modal2.png
diff --git a/JavaScript/modal/index.html b/JavaScript/modal/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <title> Modal </title>
+    <link href="style.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <div id="overlay">
+       <div id="modal">
+          <h2> Open Modal </h2>
+            <p> ***  A cool modal window *****</p>
+            <button id="close-modal"> Close </button>
+        </div>
+    </div>
+
+    <h1> * Click to open Modal * </h1>
+    <button id="open-modal"> Open </button>
+
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/JavaScript/modal/script.js b/JavaScript/modal/script.js
@@ -0,0 +1,7 @@
+document.getElementById("open-modal").addEventListener("click", function() {
+  document.getElementById("overlay").style.display = "block";
+})
+
+document.getElementById("close-modal").addEventListener("click", function() {
+  document.getElementById("overlay").style.display = "none";
+})
diff --git a/JavaScript/modal/style.css b/JavaScript/modal/style.css
@@ -0,0 +1,55 @@
+html, body {
+  margin: 0;
+  font-family: 'Courier New', Courier, monospace;
+  text-align: center;
+}
+
+
+body {
+    background-image: linear-gradient(to right, rgba(255,0,0,0), rgb(62, 245, 209));
+}
+
+h1{
+  padding-top: 50px;
+}
+
+#open-modal, #close-modal {
+  background-color:blueviolet;
+  color: white;
+  border: none;
+  border-radius: 2px;
+  padding: 15px 32px;
+  font-size: 20px;
+  cursor: pointer;
+
+}
+
+#open-modal:hover {
+  background: black;
+  border: solid 1px blueviolet;
+}
+
+#modal {
+  background-color: white;
+  width: 50%;
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 20px;
+  height: 200px;
+  position: relative;
+  top: 30%;
+  opacity: 1;
+}
+
+#overlay {
+  display: none;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+
+}