Overlay Modal Window / Popup

A simple javascript modal / popup works out of the box. When you don't like writing html, css and javascript again and again in your application. Compatible with all Javascript Frameworks.

Features

• Flexible and configurable
• Quick effects hide and show
• Displays in center of the screen
• Customizable using CSS
• Dynamic content in popup

Demo Video Links

Simple Notification Modal Window

Modal Window with CTA's

Modal window with Enable/Disable button & Checkbox control

Installation

Ckick here for easy Installation

Install FMTI Modal Window using below command npm install fmti-modal-window --save

[ ] Step 1: Add div tag in your html file as below

<div id="apModal" style="display:none"></div>

[ ] Step 2: Import package

    import fmtiModalWindow from 'fmti-modal-window';

[ ] Step 3: Intialize Modal Window using

  //Below are the properties exist in modal window
  const modalwindow =  fmtiModalWindow.init({
    containerStyle:{},
    headerInfo:{
       showTitle: true,
       text: "The Purpose of our lives",
       style:{}
    },
    bodyContentInfo:{
       text: "Everyone thinks of changing the world, but no one thinks of changing himself",
       style:{},
       secondary:[{
          text: "Life is either a great adventure or nothing. `Helen Keller",
          style:{
             "text-align": "center",
             "color": "brown"
          }
       }],
       actions:[
          {
             type: "checkbox",
             id: "LittleStart",
             targetElId: "FMTI-MODAL-BTN-RIGHT", //Button Id enable/disable
             text: "Hey! Don't show me again",
             style:{},
             onCheck: (btnId)=>{ // btnId latest change
                fmtiModalWindow.enableButton(btnId);
             },
             onUnCheck: (btnId)=>{ //  btnId latest change
                fmtiModalWindow.disableButton(btnId);
             }
          }
       ]
    },
    footerInfo:{
       btnLeft:{
          show: true,
          enable: true,
          text: "Cancel",
          style:{},
          onclick:"DESTROY"
       },
       btnRight:{
          show: true,
          text: "Delete",
          enable: false,
          style:{},
          onclick:()=>{}
       }
    }
 });

[ ] Step 4: Subscribe to Modal Window promise

  // `{success: true, job: "Done 🚶🏿‍♂️", controllerId: "apModal"}`
    modalwindow.then((data)=>{
            if(data.success){
               fmtiModalWindow.openModal(data.controllerId);
            }
            }).catch((err)=>{
                  console.log("err",err);
            });

Available Methods

| Function | Parameters | Description | |-------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------| | destroyModal() | string:eg: fmtiModal.destroyModal("apModal") apModal is id given for modal window| It will close the modal popup and removes the element from dom.| | openModal() | string: fmtiModal.openModal(data.controllerId); controllerId is retrieved by init() promose. | This method display popup as an overlay on the window.| | disableButton() | string: fmtiModal.disableButton("FMTI-MODAL-BTN-RIGHT"); Button id provided to method disable the button. | This method disables the footer CTA button| | enableButton() | string: fmtiModal.enableButton("FMTI-MODAL-BTN-RIGHT"); Button id provided to method enable the button. | This method enables the CTA button|

Style Properties (Latest)

• containerStyle : {} object can be passed as root element to style popup container
• style:{} In each indvidual property eg: headerInfo, footerInfo, bodyContentInfo supports style object now

Secondary Text (Latest)

 bodyContentInfo:{
   text: "dummy text...",
   style:{},
   secondary:[{ 
      text: "Life is either a great adventure",
      style:{
         "text-align": "center",
         "color": "brown"
      }
   }]
},