This is jQuery Super Lightweight, Super Simple Popup Dialog Box – 1.5KB. No Fuss.
It supports fading background and rounded corners, very simple to setup and use, no complex features just a quick and simple but effective dialog box.
A simple demo with minimum code can be found here: http://www.mywebdeveloperblog.com/projects/modalpoplite/demo/
Or from GitHub: https://github.com/shibbard/jQuery-modalPopLite/downloads
Step 1: Include files.
Step 2: Attach the popup to a container on the page providing reference to open button(s) and close button.
Step 3: Create the page with an element to click and open the popup and a close button.
Simple.
Options:
- openButton – target element to open the popup (eg ‘#clicker’ or a class ‘.clicker’)
- closeButton – target element to close the popup
- isModal – true or false. If true the popup is modal and clicking the background will not close the popup. Only the ‘closeButton’ target will.
Hi, thanks for sharing!
Keep up this good job, many people just like me do need it!
Have nice days ahead!
I attached an X button to the top right corner to allow closing popup. I want, however to disable closing popup by clicking anywhere outside of it. Is there an easy way to do that?
Thank You
Hi, I have just put up version 1.3.0 – this has a new option ‘isModal’. Set this to true and the background will not close the popup.
Simon.
Is there possibillity to make it appear automatically? Thanks
You can use a trigger on the button it is attached to, if necessary hide the button with CSS e.g. #hide-btn{display:none;}
$(document).ready(function () {
$('#hide-btn').trigger('click');
});
</script>