Skip to content

Commit

Permalink
✨[Feature Request]: Creating POPUP to blood types
Browse files Browse the repository at this point in the history
  • Loading branch information
Anjaliavv51 committed Jul 3, 2024
1 parent c4c85de commit 7823c4d
Show file tree
Hide file tree
Showing 4 changed files with 207 additions and 743 deletions.
58 changes: 57 additions & 1 deletion Css-Files/bloodstyle.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
27 changes: 15 additions & 12 deletions Html-Files/blood.html
Original file line number Diff line number Diff line change
Expand Up @@ -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;">
Expand All @@ -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;">
Expand All @@ -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;">
Expand All @@ -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;">
Expand All @@ -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;">
Expand All @@ -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;">
Expand All @@ -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;">
Expand All @@ -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>
Expand Down Expand Up @@ -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');
Expand All @@ -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>
Expand Down
Loading

0 comments on commit 7823c4d

Please sign in to comment.