Multipurpose Modal & Popup Window

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

}

Download Details:

Author: Merkoba

Live Demo: https://merkoba.github.io/Msg/

GitHub: https://github.com/Merkoba/Msg

#javascript #css