Multipurpose Modal & Popup Window – Msg

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.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