Simple Themable Dialog Popup Plugin For jQuery - basicPopup
File Size: | 17.4 KB |
---|---|
Views Total: | 4032 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A basic jQuery popup plugin used to display a responsive, fullscreen, full styleable and ajax-enabled dialog/modal box on your web project.
How to use it:
1. Include the core stylesheet and a CSS theme of your choice on the web page.
<link href="css/basicPopup.css" rel="stylesheet"> <!-- <link href="css/basicPopupDark.css" rel="stylesheet"> --> <!-- <link href="css/basicPopupClear.css" rel="stylesheet"> --> <link href="css/basicPopupDefault.css" rel="stylesheet">
2. Create the Html content to display in the popup window.
<div id="popup-content"> ... </div>
3. Make it hidden on page load.
#popup-content { display:none;
4. Create an Html element to toggle the popup window.
<button id="btn-open">Click me</button>
5. Display the popup window once you click on the toggle button.
$('#btn-open').click(function(){ $.basicpopup({ content: $('#popup-content').html() }); });
6. Available options.
$.basicpopup({ // load remote content via ajax url: '', // custom popup content content: '', // display close button btnClose: true, // addional CSS class for the popup mainClass : '', // callback function afterShow: false });
This awesome jQuery plugin is developed by Lukas238. For more Advanced Usages, please check the demo page or visit the official website.