Author: | madprops |
---|---|
Views Total: | 1,526 |
Official Page: | Go to website |
Last Update: | November 29, 2018 |
License: | MIT |
Preview:

Description:
Msg is a JavaScript library to create and manage highly customizable modal windows and popup boxes on the webpage. Also can be used for lightbox, alerts, notifications, snack bars and much more.
Basic usage:
Install it with NPM.
$ npm install msg-modal
Import the main JavaScript file ‘msg.js’ into the document.
<script src="msg.js"></script>
The JavaScript to show a basic modal window:
msg.show('Modal content here')
Create a modal window that auto close after 4 seconds.
msg_autoclose.show('Modal content here');msg_autoclose.set_title("Warning")
Create a fullscreen modal window.
msg_ox.show('Modal content here')
Create a modal window that has a 3 second delay before you could close it.
msg_delay.show('Modal content here')
Change the default position of the modal window.
msg_ptop.show('Modal content here') msg_pbottom.show('Modal content here') msg_pleft.show('Modal content here') msg_pright.show('Modal content here') msg_ptleft.show('Modal content here') msg_ptright.show('Modal content here') msg_pbleft.show('Modal content here') msg_pbright.show('Modal content here')
If you want to create stackable popup messages:
var msg_pop = Msg( { // options here });
Possible options for the popup.
{ class: "green", enable_overlay: false, position: "bottomright", remove_after_close: true, zStack_level: 1, window_width: "460px", lock: false, show_effect: "fade", // scale, slide_up, slide_down, slide_left, slide_right show_effect_duration: 350, close_effect: "fade", // scale, slide_up, slide_down, slide_left, slide_right close_effect_duration: 350 , }
Possible options for the auto-close popup.
{ class: "green", enable_overlay: false, position: "bottomright", autoclose: true, enable_progressbar: true, remove_after_close: true, zStack_level: 1, window_width: "460px", lock: false, show_effect: "fade", // scale, slide_up, slide_down, slide_left, slide_right show_effect_duration: 350, close_effect: "fade", // scale, slide_up, slide_down, slide_left, slide_right close_effect_duration: 350, }
Possible options for the snackbar.
{ class: "black", content_class: "snackbar", position: "bottom", edge_padding_y: 0, window_min_width: "600px", window_x: "none", // inner_right, inner-left, floating_right, floating_left enable_overlay: false, autoclose: true, autoclose_delay: 10000, close_on_show: true, zStack_level: 1, lock: false, show_effect: "slide_up", // scale, slide_up, slide_down, slide_left, slide_right show_effect_duration: 350, close_effect: "slide_down", // scale, slide_up, slide_down, slide_left, slide_right close_effect_duration: 350, sideStack = "none", // horizontal, vertical }
Possible options for the modal window.
{ window_height: "100vh", window_min_height: "100vh", window_max_height: "100vh", window_width: "100vw", window_min_width: "100vw", window_max_width: "100vw", disable_transformations: true, disable_content_padding: true, full_content: true, sideStack = "none" // horizontal, vertical }
Changelog:
v11.3.0 (11/29/2018)
- Refactoring.
09/02/2018
- Porting unix pushing stuff
08/06/2018
- Added callbacks