mgn-modal ( Don't Need jQuery )

Execute Modal Window function.

• Target browser : IE9+
• For IE9, display Modal Window without transition.

Install

npm i mgn-modal -S

Or Download raw data

↓ download "mgn-modal.js"

Import

import mgnModal from "mgn-modal"

Constructor

new mgnModal(element [, option]);

|Argument|Data type|Default|Descroption| |:-------|:--------|:------|:----------| |element|String|-(Required)|Specify target elementex) ".modal"| |option|Object|-|ex) option = { width: 1024, modalSpeed: 200, bgColor: "#FFF", bgOpacity: 0.6, innerBgColor: "#FFF", innerBgPadding: 20, closeBtn: "<img src='close.png'>", addClass: "wrap", fixed: false}|

|Option|Data type|Default|Descroption| |:-------|:--------|:------|:----------| |width|Number|768|Specify Modal Window width.| |modalSpeed|Number|200|Specify speed when open Modal.| |bgColor|String|"#000"|Specify background color.| |bgOpacity|Number|0.8|Specify transparency for background color.| |innerBgColor|String|"none"|Specify background color.| |innerBgPadding|Number|0|Specify padding background.| |closeBtn|String|"×"|Specify close button.| |addClass|String|-|Add class to the topmost containing element.| |fixed|bool|false|Set to "true" to make background fixed.|

Method

|Method|Argument|Descroption| |:-------|:--------|:------| |ReInit()|-|Execute when an element target for Modal is added later.| |Open( element )|String|Specify the Modal element want to execute.( ex: ".default_open" )| |Close()|-|Close the open Modal screen.| |OpenEnd = function(){};|-|Execute after opening Modal screen.| |CloseEnd = function(){};|-|Execute after closing Modal screen.|

Demo

https://frontend-isobar-jp.github.io/mgn-modal/

import mgnModal from "mgn-modal"

let modal = new mgnModal(".j-modal");
modal.OpenEnd = function( index ){
	console.log(index, "openEnd")
};
modal.CloseEnd = function(){
	console.log("closeEnd")
};

//

mgnModal(
    ".j-modal2",
    {
        width: 768,
        modalSpeed: 200,
        bgColor: "#CCC",
        bgOpacity: 0.9,
        innerBgColor: "#CCC",
        innerBgPadding: 40,
        closeBtn: "Close",
        closeCancel: false,
        addClass: "",
        fixed: true
    }
);