1 Attachment(s)
[jQuery] Sliding-down fading-in pop-up message - Updated 14 May 2020
This script was designed for a business, notifying customers when they're reopening. As the message appears, opening as it's sliding down and fading in, it ends at 80% opacity.
Update (14 May 2020): I've added a close button, which causes the message to fade out when pressed. On mouse-over the cursor changes to a pointer.
Attachment 177015
A working demo is at this link : https://jsfiddle.net/5c90qfoy/
To rerun the demo when you visit the above link, the "Run" button is located on the top right of it's page.
Below is the jQuery preloader code which needs to be placed within <script Place code here />, then place between your website's head tags: <head> Place the preloader script here </head>
Code:
src="https://code.jquery.com/jquery-3.5.0.js" type="text/javascript"
CSS:
Code:
#PopupDiv {
border-radius: 15px;
margin-left: auto;
margin-right: auto;
width: 460px;
display: none;
height: 260px;
left: 0;
right: 0;
position: absolute;
background: #ecc1b1;
}
#PopupInnerDiv {
border-radius: 15px;
width: 440px;
height: 240px;
display: none;
margin: 10px;
background: #ffffff;
}
#CloseButtonDiv {
border-radius: 5px;
width: 20px;
float: right;
margin: 5px;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
text-align: center;
color: #000000;
background: #ecc1b1;
cursor: pointer;
z-index: 1 !important;
position: relative;
}
#CloseButtonDiv:hover {
font-weight: bold;
}
#CloseButtonDiv:active {
font-weight: normal;
}
#Text {
height: 230px;
padding: 10px;
margin-top: 5px;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #000000;
left: 0;
right: 0;
position: absolute;
margin-left: 10px;
}
HTML:
Code:
<div id="PopupDiv"><div id="PopupInnerDiv"><div id="CloseButtonDiv">X</div><p id="Text">
Dear Customers,<br /><br />
We're officially opening ______ with extended hours for phoned in appointments to limit the amount of customers in our shop at one time.<br /><br />
On your appointment, please come alone. Our staff will be wearing face masks as yourselves.<br /><br />
We thank you for your patients and understanding.
</p></div></div>
Script:
Code:
<script>
$(document).ready(function(){
//Horizontal Sliding
$("#PopupDiv").css({top: -100, opacity: 0})
.slideDown(2000 )
.animate(
{top: 100, opacity: 0.8},
{queue: false, duration: 2000 },
);
$("#PopupInnerDiv").css({top: 0, opacity: 0})
.slideDown(2000)
.animate(
{top: 50, opacity: 1},
{queue: false, duration: 2000 },
);
$('#CloseButtonDiv').click(function() {
$("#PopupDiv").css({top: 100, opacity: 0.8})
.slideDown(700 )
.animate(
{top: 100, opacity: 0},
{queue: false, duration: 700 },
);
});
});
</script>
Re: [jQuery] Sliding-down fading-in pop-up message - Updated
This comment was for testing a bug, but all is good now. :)
