Custom jQuery Alert / Popup Box jQuery Plugin – popup.js

Do you want to add customised popup or alert box on your website if yes then in this post I am going to share simple jQuery plugin called popup.js which help your to create customised alert box for your website with callback action. You can also easily create confirm alert popup with Ok and Cancel button with customised options with callback method.
 jQuery Alert / Popup Box jQuery Plugin


Libraries

The plugin is dependent on jQuery Core library so include it first after that add plugins CSS+JS library.

<!--CSS-->
<link rel="stylesheet" type="text/css" href="popup.css">
 
<!--JS-->
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="popup.js"></script>

Open a basic alert dialog box on button click

<input type="button" class="button-style" value="Basic Alert Dialog" id="popupA" />
<script type="text/javascript">
	$('#popupA').click(function(){
		var popup = new Popup({
			'type': 'info',
			'title': 'Alert Popup',
			'text': 'An alert popup'
		});
	})
</script>



Open a temporary alert box that automatically dismisses after a timeout you specify

<input type="button" class="button-style" value="Auto Dismiss" id="popupB" />
<script type="text/javascript">
	$('#popupB').click(function(){
		var popup = new Popup({
			'type': 'info',
			'title': 'Alert Popup',
			'text': 'An alert popup',
			'color': '#fff',
			'bgcolor': '#213bfd',
			'autohide': true,
			'showtime': 2000 // 2sec.
		});
	})
</script>

Open a alert box callback method

<input type="button" class="button-style" value="With Callback" id="popupC" />
<script type="text/javascript">
	$('#popupC').click(function(){
		var popup = new Popup({
			'type': 'info',
			'title': 'Alert Popup',
			'text': 'An alert popup',
			'closeCallBack': function(){
				alert('An alert popup');
			}
		})
	})
</script>




Open a popup dialog With Confirm And Cancel Buttons

<input type="button" class="button-style" value="With Confirm And Cancel Buttons" id="popupF" />
<script type="text/javascript">
	$('#popupF').click(function(){
		var popup = new Popup({
			'type': 'submit',
			'title': 'Confirm Dialog',
			'text': 'Are You Sure?',
			'cancelbutton': true
		})
	})
</script>

See live demo and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.