Multipurpose Modal & Popup Window – Msg

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