Author: | jaysonwm |
---|---|
Views Total: | 6,110 views |
Official Page: | Go to website |
Last Update: | August 7, 2018 |
License: | MIT |
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