JS modal window added

It is a JS mini project which deals with the modal functionality made via DOM manipulation.. Any further modifications are welcome...
gdscmuet · Oct 20, 2021 · b1bca09 · b1bca09
1 parent 6c35915
commit b1bca09
Show file tree

Hide file tree

Showing 6 changed files with 160 additions and 0 deletions.
diff --git a/js-modal window/Readme.md b/js-modal window/Readme.md
@@ -0,0 +1,3 @@
+## This is a mini JS project of JS modal window made with plain Java Script and it is all about DOM manipulation and settting up the outcomes with the CSS code.
+
+# Any modifications are welcomed here...
diff --git a/js-modal window/bg.jpg b/js-modal window/bg.jpg
diff --git a/js-modal window/ind.html b/js-modal window/ind.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>JS modal</title>
+    <link rel="stylesheet" href="styles.css">
+    <script src="https://kit.fontawesome.com/c7295c2588.js" crossorigin="anonymous"></script>
+</head>
+
+<body>
+    <header class="hero">
+        <div class="banner">
+            <h1>Modal Project</h1>
+            <button class="btn modal-btn">Open Modal</button>
+        </div>
+    </header>
+
+    <!-- modal -->
+    <div class="model-overlay">
+        <div class="modal-container">
+            <h3>Sorry, you haven't saved the file yet...</h3>
+            <button class="close-btn">
+             <i class="fa fa-times"></i>
+
+           </button>
+        </div>
+    </div>
+
+    <!-- line no 27 and 18 of this page will be the target for JS DOM manipulation to optimize the code -->
+    <script src="resp.js"></script>
+</body>
+
+</html>
diff --git a/js-modal window/read.txt b/js-modal window/read.txt
@@ -0,0 +1,3 @@
+modal-btn, modal-overlay, close-btn -- applied in JS
+
+open-modal-- applied to open the page
diff --git a/js-modal window/resp.js b/js-modal window/resp.js
@@ -0,0 +1,12 @@
+modalBtn = document.querySelector(".modal-btn")
+modelOverlay = document.querySelector(".model-overlay")
+closeBtn = document.querySelector(".close-btn")
+
+
+modalBtn.addEventListener("click", function() {
+    modelOverlay.classList.add("show-overlay")
+})
+
+closeBtn.addEventListener("click", function() {
+    modelOverlay.classList.remove("show-overlay");
+})
diff --git a/js-modal window/styles.css b/js-modal window/styles.css
@@ -0,0 +1,105 @@
+* {
+    margin: 0px;
+}
+
+.hero {
+    height: 100vh;
+    background: url("bg.jpg") no-repeat center;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.banner {
+    width: 500px;
+    height: 300px;
+    background: white;
+    /* transform: translate(569px, 535px); */
+    border: 2px solid grey;
+    border-radius: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    box-shadow: 2px 2px 3px black;
+}
+
+h1 {
+    color: black;
+    font-size: 4rem;
+}
+
+.btn {
+    font-size: 1.5rem;
+    margin: 40px;
+    cursor: pointer;
+    background-color: blue;
+    color: white;
+    border: 2px solid white;
+    border-radius: 10px;
+    padding: 5px;
+    width: 200px;
+}
+
+.btn:hover {
+    border: 2px solid grey;
+    background: white;
+    color: blue;
+}
+
+.model-overlay {
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    width: 100%;
+    height: 100%;
+    display: grid;
+    place-items: center;
+    background: rgb(99, 138, 170);
+    visibility: hidden;
+    z-index: -9;
+}
+
+.modal-container {
+    width: 500px;
+    height: 300px;
+    background: white;
+    /* transform: translate(569px, 535px); */
+    border: 2px solid grey;
+    border-radius: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    box-shadow: 2px 2px 3px black;
+}
+
+h3 {
+    font-size: 2.4rem;
+}
+
+.fa {
+    color: red;
+    height: 10px;
+    width: 24px;
+    font-size: 2rem;
+}
+
+.close-btn {
+    height: 37px;
+    position: relative;
+    top: -135px;
+    left: 223px;
+    border: 2px solid white;
+    cursor: pointer;
+}
+
+
+/* JS Part - */
+
+.show-overlay {
+    visibility: visible;
+    z-index: 9;
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		## This is a mini JS project of JS modal window made with plain Java Script and it is all about DOM manipulation and settting up the outcomes with the CSS code.

		# Any modifications are welcomed here...
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		modal-btn, modal-overlay, close-btn -- applied in JS

		open-modal-- applied to open the page