Today I am going to show you how to make a push notification or pop up notice using html and css.
At first edit your main css file named style.css and copy the following code. And then paste it on the end of css file code and save.
The css code is-
/* Popup styles */
#popup {
display: none;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: white;
border: 2px solid #ccc;
padding: 20px;
z-index: 1000;
}
#popup img {
max-width: 100%;
height: auto;
}
#close {
float: right;
font-size: 20px;
margin-top: -25px;
margin-right: -20px;
cursor: pointer;
}
#close:hover {
color: #ff0000;
}
#overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
}
Then just copy this html code and paste in body tag of index.html file and save.
<!-- Popup and Overlay -->
<div id="overlay"></div>
<div id="popup">
<span id="close">✖</span>
<img src="Notice/Admission.jpg" alt="Popup Image" />
</div>
<script>
$(document).ready(function() {
// Show popup
$('#overlay').fadeIn();
$('#popup').fadeIn();
// Close popup on click of close button
$('#close').click(function() {
$('#overlay').fadeOut();
$('#popup').fadeOut();
});
// Automatically close popup after 10 seconds
setTimeout(function() {
$('#overlay').fadeOut();
$('#popup').fadeOut();
}, 10000);
});
</script>
Note: Change the green backround color image link from the code as your wish.