✨[Feature Request]: Creating POPUP to blood types (#750)

#746 Co-authored-by: Vamshi Maskuri <117595548+varshith257@users.noreply.github.com>
Anishkagupta04 · Jul 3, 2024 · e31241a · e31241a
1 parent 9957bfe
commit e31241a
Show file tree

Hide file tree

Showing 4 changed files with 207 additions and 743 deletions.
diff --git a/Css-Files/bloodstyle.css b/Css-Files/bloodstyle.css
@@ -664,4 +664,60 @@ padding-top: 3rem;
         text-align: center;
         padding: 1rem 0.5rem 2rem 0.5rem;
     }
-  }
+  }
+  /*Popup Blood list*/
+  .popup {
+    display: none;
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0,0,0,0.4);
+}
+
+.popup-content {
+    background-color: #fefefe;
+    margin: 15% auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 80%;
+    max-width: 600px;
+}
+
+.close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.close:hover,
+.close:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.popup-content h2, .popup-content h3 {
+    color: #4bb6b7;
+    padding: 10px 0;
+    margin: 0;
+}
+
+.popup-content .list {
+    padding-left: 20px;
+}
+
+.popup-content .list p {
+    margin: 5px 0;
+}
+
+.popup-content strong {
+    display: block;
+    margin-top: 10px;
+    margin-bottom: 20px;
+}
diff --git a/Html-Files/blood.html b/Html-Files/blood.html
@@ -53,7 +53,7 @@
         <h2>A+</h2>
         <span data-purecounter-start="0" data-purecounter-end="125" data-purecounter-duration="1"
                 class="purecounter"></span><p class="ltr">liters</p>
-        <a href="../Html-Files/list.html">Get List</a>
+        <a id="getListBtn-A+" class="get-list-btn">Get List</a>
     </div>
     </div>
     <div class="drop" style="--clr:#be01fe;">
@@ -62,7 +62,7 @@ <h2>O+</h2>
         <span data-purecounter-start="0" data-purecounter-end="50" data-purecounter-duration="1"
                 class="purecounter"></span>
                 <p class="ltr">liters</p>
-        <a href="../Html-Files/list.html">Get List</a>
+        <a id="getListBtn-O+" class="get-list-btn">Get List</a>
     </div>
     </div>
     <div class="drop" style="--clr:#01b4ff;">
@@ -71,7 +71,7 @@ <h2>B+</h2>
         <span data-purecounter-start="0" data-purecounter-end="78" data-purecounter-duration="1"
                 class="purecounter"></span>
                 <p class="ltr">liters</p>
-        <a href="../Html-Files/list.html">Get List</a>
+        <a id="getListBtn-B+" class="get-list-btn">Get List</a>
     </div>
     </div>
     <div class="drop" style="--clr:#fc7200;">
@@ -80,7 +80,7 @@ <h2>AB+</h2>
         <span data-purecounter-start="0" data-purecounter-end="35" data-purecounter-duration="1"
                 class="purecounter"></span>
                 <p class="ltr">liters</p>
-        <a href="../Html-Files/list.html">Get List</a>
+        <a id="getListBtn-AB+" class="get-list-btn">Get List</a>
     </div>
     </div>
     <div class="drop" style="--clr:#010efe;">
@@ -89,7 +89,7 @@ <h2>A-</h2>
         <span data-purecounter-start="0" data-purecounter-end="72" data-purecounter-duration="1"
                 class="purecounter"></span>
                 <p class="ltr">liters</p>
-        <a href="../Html-Files/list.html">Get List</a>
+        <a id="getListBtn-A" class="get-list-btn">Get List</a>
     </div>
     </div>
     <div class="drop" style="--clr:#01d0ff;">
@@ -98,7 +98,7 @@ <h2>O-</h2>
         <span data-purecounter-start="0" data-purecounter-end="20" data-purecounter-duration="1"
                 class="purecounter"></span>
                 <p class="ltr">liters</p>
-        <a href="../Html-Files/list.html">Get List</a>
+        <a id="getListBtn-O" class="get-list-btn">Get List</a>
     </div>
     </div>
     <div class="drop" style="--clr:#00fe11;">
@@ -107,7 +107,7 @@ <h2>B-</h2>
         <span data-purecounter-start="0" data-purecounter-end="62" data-purecounter-duration="1"
                 class="purecounter"></span>
                 <p class="ltr">liters</p>
-        <a href="../Html-Files/list.html">Get List</a>
+        <a id="getListBtn-B" class="get-list-btn">Get List</a>
     </div>
     </div>
     <div class="drop" style="--clr:#fe0101;">
@@ -116,7 +116,7 @@ <h2>AB-</h2>
         <span data-purecounter-start="0" data-purecounter-end="12" data-purecounter-duration="1"
                 class="purecounter"></span>
                 <p class="ltr">liters</p>
-        <a href="../Html-Files/list.html">Get List</a>
+        <a  id="getListBtn-AB" class="get-list-btn">Get List</a>
     </div>
     </div>
 </div>
@@ -207,10 +207,12 @@ <h4>RAPIDOC Newsletter</h4><br>
       </svg>
     </div>
   </div>
-
-
-
-
+  <div id="popup" class="popup">
+    <div class="popup-content">
+        <span class="close">&times;</span>
+        <div id="popupContent"></div>
+    </div>
+    </div>
       <script>
         document.addEventListener("DOMContentLoaded", function () {
           const backToTopButton = document.getElementById('back-to-top-container');
@@ -236,6 +238,7 @@ <h4>RAPIDOC Newsletter</h4><br>
         });
 
       </script>
+      <script src="../js/popupbloodlist.js"></script>
 <script src="bootstrap/js/bootstrap.bundle.min.js"></script>
 <script src="glightbox/js/glightbox.min.js"></script>
 <script src="php-email-form/validate.js"></script>