Can you recommend a jquery plugin for a non-intrusive popup window?

Marisa
Marisa used Ask the Experts™
on
I am just looking for a simple, light jquery plugin. I want to load a popup box/window on my home page that displays this months specials/discounts. I don't want it to be intrusive, so I want to be able to control the placement. Ideally it will pop up from the bottom right portion of the screen. I also want to be able to choose the look and styling.

I cannot even believe the trouble I had with trying to google what I need. All I could find were modals or tooltips or onclick or windows that were fixed in the center of the screen. I tried several different wording on searches and went several pages deep in results, and cannot seem to find something that fulfills those requirements.

I figure someone on here might know of something off hand that they could recommend. Thanks!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Chinmay PatelChief Technology Ninja
Distinguished Expert 2018

Commented:
Hi Marisa,

I think you are looking for https://www.jqueryscript.net/demo/Notification-Countdown-Bar-notificationManager/

PS: I know due to my past alliances my views would be considered partial but give it a shot to https://bing.com. make it your primary engine for day to day queries and only hit Google when you absolutely find nothing on bing.

Regards,
Chinmay.
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
It may help to better define what you mean by a pop up.  My first thought would be a modal but as I read your question that is not what you are interested in.  

I just bootstrap in most all my projects and alerts are part of the package https://getbootstrap.com/docs/4.1/components/alerts/.  However, you can easily do the same either directly in your html via your server side script or with jquery.

In a simple example, assume you have html
 <div class="container">
         <div class="products">
            <div class="product">product A</div>
            <div class="product">product B</div>
            <div class="product">product C</div>
         </div>
      </div>

Open in new window

And you want to add your alert just above the products div like
 <div class="container">
         <div class="special">special note for top of page</div>
         <div class="products">
            <div class="product">product A</div>
            <div class="product">product B</div>
            <div class="product">product C</div>
         </div>
      </div>

Open in new window


You can do that with jquery append.

https://jsbin.com/cosisilemo/edit?html,output
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>test</title>
      <script src="https://code.jquery.com/jquery-git.js"></script>
      <script>
         $(function(){
         var note='special note for top of page';
         $('.container').prepend('<div class="special">'+note+'</div>');
         });
      </script>
   </head>
   <body>
      <div class="container">
         <div class="products">
            <div class="product">product A</div>
            <div class="product">product B</div>
            <div class="product">product C</div>
         </div>
      </div>
   </body>
</html>

Open in new window

Now you just need to add to your css a class for special to make it look pretty. This can be done by adding directly to your css file or using jquery addCSS or in your code where you have <div class="special">'+note+'</div> add a style="background-color:red" or whatever you want.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
This EE article discusses how to create your own popup - very lightweight and you have full control over the styling

https://www.experts-exchange.com/articles/28838/Create-a-responsive-confirmation-popup-using-HTML-CSS-jQuery-and-Promises.html
MarisaWeb Design

Author

Commented:
Hi guys. Sorry, this project got bumped down in the list, but it is still in the works. I will come back here when I'm ready to pick it back up again. Thanks for all the suggestions!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial