Author: | Merkoba |
---|---|
Views Total: | 29 views |
Official Page: | Go to website |
Last Update: | May 2, 2023 |
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, and much more.
Basic usage:
1. Install it with NPM.
$ npm install msg-modal
2. Import the main JavaScript file ‘msg.js’ into the document.
<script src="msg.js"></script>
3. Create a new instance of the msg.js.
var msg = Msg.factory();
4. Show a basic modal window:
// set content msg.show('Modal content here'); // or load content from an element msg.show(document.getElementsByTagName("h1")[0]);
5. Create a modal window that auto close after x seconds.
var msg = Msg.factory({ preset:"popup" // or "popup_autoclose" });
6. Create a fullscreen modal window.
var msg = Msg.factory({ preset:"window" });
7. All possible options to customize the msg.js
var msg = Msg.factory({ id: "foo", class: "default", container_class: undefined, overlay_class: undefined, window_class: undefined, topbar_class: undefined, titlebar_class: undefined, content_class: undefined, window_inner_x_class: undefined, window_floating_x_class: undefined, window_overlay_x_class: undefined, progressbar_container_class: undefined, progressbar_class: undefined, // Prevents scrolling from propagating to the body lock: true, locked_element: "body", close_on_overlay_click: true, close_on_escape: true, closeable: true, // When pressing Escape, it clears the text from an active input=text or textarea element, if it has a value. // If it's empty and close_on_escape is true, it closes the window. clear_editables: false, // When true, it keeps the html elements in the dom when the window is closed. // If false, it destroys the html elements on close. persistent: true, remove_after_close: true, // "center", "left" (hStackable), "right" (hStackable), "top" (vStackable), // "bottom" (vStackable), "topleft" (vStackable) (hStackable), "topright" (vStackable) (hStackable), // "bottomleft" (vStackable) (hStackable), or "bottomright" (vStackable) (hStackable). position: Default: "center", window_width: "auto", window_height: "auto", window_min_width: "auto", window_min_height: "auto", window_max_width: "auto", window_max_height: "80vh", window_cursor: "default", titlebar_cursor: "default", window_unselectable: false, edge_padding_x: 20, edge_padding_y: 20, // "vertical", "horizontal" or "none" sideStack: "vertical", sideStack_padding: 20, sideStack_collapse: true, zStack_level: 2, autoclose: false, autoclose_delay: 5000, enable_titlebar: false, center_titlebar: false, enable_progressbar: false, bind_progressbar_to_autoclose: true, reverse_autoclose_progressbar: false, show_delay: 0, close_delay: 0, close_on_show: false, close_others_on_show: false, scroll_on_show: true, enable_overlay: true, // "inner_right", "inner_left", "floating_right", "floating_left" or "none" window_x: "inner_right", // "right", "left" or "none" overlay_x: "none", // "fade", "scale", slide_up", "slide_down" // "slide_left", "slide_right" or "none" show_effect: "fade", show_effect_duration: [200, 200], subsequent_show_effects: false, // "fade", "scale", "slide_up", "slide_down" // "slide_left", "slide_right" or "none" close_effect: "fade", close_effect_duration: [200, 200],umber is given, it will be the effect duration for both the window and the overlay, which start at the same time. replace_linebreaks: false, disable_transformations: false, disable_content_padding: false, full_content: false, while_open_interval: 1000, });
9. Callback functions.
var msg = Msg.factory({ before_show: function(){}, after_show: function(){}, before_set: function(){}, after_set: function(){}, before_set_title: function(){}, after_set_title: function(){}, before_set_progress: function(){}, after_set_progress: function(){}, before_close: function(){}, after_close: function(){}, after_last_closed: function(){}, before_toggle: function(){}, after_toggle: function(){}, before_create: function(){}, after_create: function(){}, before_destroy: function(){}, after_destroy: function(){}, while_open: function(){}, on_click: function(){}, on_middle_click: function(){}, on_wheel_down: function(){}, on_wheel_up: function(){}, on_overlay_click: function(){}, on_titlebar_click: function(){}, on_x_button_click: function(){}, });
10. API methods.
msg.show(html) msg.show([title, html]) msg.set(html) msg.set_or_show(html) msg.set_title(html) msg.close(): msg.toggle() msg.html() msg.title_html() msg.is_open() msg.any_open() msg.any_higher_open() msg.any_lower_open() msg.num_open() msg.num_open_higher() msg.num_open_lower() msg.create() msg.recreate() msg.destroy() msg.remove() msg.highest_zIndex() msg.highest_instance() msg.is_highest() msg.to_top() msg.check_options() msg.set_progress(percentage) msg.get_progress() msg.instances() msg.higher_instances() msg.lower_instances() msg.get_instance_by_id(id) msg.show_all() msg.close_all() msg.close_all_higher() msg.close_all_lower() msg.create_all() msg.recreate_all() msg.destroy_all()
11. Properties
msg.container msg.overlay msg.overlay_x msg.topbar msg.titlebar msg.window_inner_x msg.window_floating_x msg.window msg.content-container msg.content msg.progressbar-container msg.progressbar msg.options
Changelog:
v14.2.2 (05/02/2023)
- Added helper functions and removed some unused code.
v14.1 (05/01/2023)
- Cleaned up
v12 (04/30/2023)
- Cleaned up the code. Effects were removed, they complicated the code way too much. “Snackbars” are gone too
v11.5.4 (02/15/2020)
- update
02/11/2022
- added Wheel functions
02/10/2022
- Small floating x mod
02/08/2022
- mid click fix
02/06/2022
- Overflow fix
v11.4.11 (11/24/2020)
- Modify the font size.
v11.4.6 (07/18/2020)
- Update
v11.4.4 (06/22/2020)
- Some fixes in the click event.
v11.4.3 (05/08/2018)
- [Fix] on_click now correctly targets clicked elements that reside inside the target containers.
v11.4.2 (04/21/2018)
- Close higher fix
v11.4.1 (04/19/2018)
- Fixed how higher and lower windows are closed. It used a for loop erroneously before.
v11.4.0 (03/12/2018)
- Better textbox handling to clear and/or close windows when being cleared.
v11.3.0 (11/29/2018)
- Refactoring.
09/02/2018
- Porting unix pushing stuff
08/06/2018
- Added callbacks