Results 1 to 2 of 2

Thread: [jQuery] Sliding-down fading-in pop-up message - Updated 14 May 2020

  1. #1

    Thread Starter
    Fanatic Member Peter Porter's Avatar
    Join Date
    Jul 2013
    Posts
    532

    [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.

    Name:  pop-up.jpg
Views: 405
Size:  70.9 KB

    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>
    Last edited by Peter Porter; May 14th, 2020 at 07:24 PM.

  2. #2

    Thread Starter
    Fanatic Member Peter Porter's Avatar
    Join Date
    Jul 2013
    Posts
    532

    Re: [jQuery] Sliding-down fading-in pop-up message - Updated

    This comment was for testing a bug, but all is good now.
    Last edited by Peter Porter; May 11th, 2020 at 04:30 PM.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width