Simple Customizable Modal Dialog JavaScript Plugin – popupmodal.js

Preview:

Description:

popupmodal.js is a vanilla JavaScript plugin helps you create responsive, customizable modal dialog popups with ease. A greate alternative to default JavaScript popup boxes like alert, confirm and prompt dialog popups.

How to use it:

To get started, you need to load the popupmodal.css and popupmodal-min.js in your project.

// CSS
<link rel="stylesheet" href="css/popupmodal.css" >
// JS
<script src="js/popupmodal-min.js">></script>

And then attach your desire element with a click event listener.

document.getElementById('your-element').addEventListener('click', function()){
  popup.alert(......); // alert dialog
}

There are 3 types of popup modal dialog popups:

// Alert
popup.alert( { content : .... } );
// Confirm
popup.confirm( { content : .... } );
// Prompt
popup.prompt( { content : .... } );

Available options.

// The content to be shown in the popup modal. DOM element is acceptable too. Popup modal will not be shown if there is no content.
content : null  
// To enable 'enter' and 'esc' key on 'Ok' and 'Cancel' button respectively.
keyboard : true  
// Configure the maximum number of character allowed.
input_length : 99  
// A placeholder for text box.
placeholder : ""  
// Configure the popup modal default button's text.
// Note : Default buttons for alert is 'ok'. For confirm and prompt is 'ok' and 'cancel'.
default_btns : null  
// Add extra buttons to the popup modal. 
// Note : Do checkout the next section on how to implement the button's callback function.
custom_btns : null  
// Popup modal's button alignment, either 'left' or 'right'.
btn_align : 'left'  
// The popup modal size. There are 'small', 'medium' and 'large'. Numbers are allowed as well, but without the 'px'. eg : 200.
modal_size : 'small'  
// The overlay background color of the popup modal.
bg_overlay_color : '#000'  
// The effect when the popup modal is shown. Slide from 'top', 'bottom', 'left' or 'right'. 'none' for no effect.
effect : 'top'

Changelog:

08/07/2018

• Minor fix