<!-- Modal Overlay Container -->
<div class="custom-modal" id="notice-modal">
<div class="modal-content"><span aria-label="Close" class="close-modal">×</span> <!-- Your Image Code --> <img alt="Bolpatra Notice" class="modal-popup-img" src="sites/AA.png" style="width: 100%; height: auto; max-width: 800px; display: block; margin: 0 auto;" /></div>
</div>
<!-- Modal CSS Styling -->
<style type="text/css">.custom-modal {
display: none; /* Hidden by default until JS triggers it */
position: fixed; /* Stay in place */
z-index: 99999; /* Sit on top of everything, including Drupal admin menus */
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto; /* Enable scroll if image is taller than screen */
background-color: rgba(0, 0, 0, 0.75); /* Black background with opacity */
}
.modal-content {
background-color: #ffffff;
margin: 5vh auto; /* 5% from top and centered */
padding: 15px;
border-radius: 8px; /* Slight rounding for a modern look */
box-shadow: 0 4px 20px rgba(0,0,0,0.5);
width: 90%;
max-width: 850px; /* Limits maximum width on large screens */
position: relative;
animation-name: modalFadeIn;
animation-duration: 0.4s;
}
.close-modal {
color: #555;
position: absolute;
top: -10px;
right: -10px;
background: #fff;
border-radius: 50%;
width: 35px;
height: 35px;
text-align: center;
line-height: 35px;
font-size: 28px;
font-weight: bold;
cursor: pointer;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
z-index: 2;
}
.close-modal:hover,
.close-modal:focus {
color: #d9534f; /* Red hover state */
text-decoration: none;
}
/* Simple fade in animation */
@keyframes modalFadeIn {
from {opacity: 0; transform: translateY(-20px);}
to {opacity: 1; transform: translateY(0);}
}
</style>
<!-- Modal JavaScript --><script>
document.addEventListener("DOMContentLoaded", function() {
var modal = document.getElementById("notice-modal");
var closeBtn = document.getElementsByClassName("close-modal")[0];
// Optional Pro-Tip: Use sessionStorage so it only pops up once per browser session
// If you want it to pop up EVERY time they hit the homepage, remove the if() statement and just use modal.style.display = "block";
if (!sessionStorage.getItem('noticeDisplayed')) {
modal.style.display = "block";
sessionStorage.setItem('noticeDisplayed', 'true');
}
// Close the modal when the user clicks on <span> (x)
closeBtn.onclick = function() {
modal.style.display = "none";
}
// Close the modal if the user clicks anywhere outside of the white content box
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
});
</script>