Cookie-enabled jQuery Modal Popup Plugin - JPopup
| File Size: | 85.8 KB |
|---|---|
| Views Total: | 1626 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
JPopup is a super simple, fully configurable jQuery modal popup plugin used to overlay any Html content on top of the webpage, with smooth open/close animations based on CSS3 properties. Cookie popup is supported that helps you create modal popups only for new visitors.
How to use it:
1. Load the latest version of jQuery JavaScript library (slim build) in the html page.
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous">
</script>
2. Load the JPopup plugin's JavaScript and CSS in the page.
<link href="jpopup.min.css" rel="stylesheet"> <script src="jpopup.js"></script>
3. The JavaScript to create a basic modal popup that auto appears on page load.
$.JPopup({
content: "Hello world!
});
4. Config the modal popup by passing the following options:
$.JPopup({
// enable/disable debug mode
verbose: true,
hidden: false,
// close button options
closeButton: '<i class="module-popup__close__button"></i>',
closeButtonPosition: 'right top',
// whether to center the text
textCenter: false,
// max width of the popup
maxWidth: false,
// time in ms before popup displayed
delay: null,
// timeout in ms between two popups
noiseTime: 5000
});
5. Enable cookies on your modal popup.
$.JPopup({
// enable/disable cookies
cookie: false,
// cookie name
cookieName: '',
// enable/disable cookie session
cookieSession: false,
// expire time
cookieExpires: 30,
// cookie path
cookiePath: '/'
});
This awesome jQuery plugin is developed by FarkasJanos. For more Advanced Usages, please check the demo page or visit the official website.











