ds-modal

ds-modal ( Don't Need jQuery )

モーダルウィンドウ機能を実装します。

• Target browser : IE9+
• IE9の場合は transition 無しでモーダルウィンドウが表示されます。

---

Install

npm i ds-modal -S

---

Import

import DsModal from "ds-modal"

---

Constructor

new DsModal(element [, option]);

Argument	Data type	Default	Descroption
element	String	-(Required)	対象要素を指定します。 ex) ".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	モーダルウィンドウの横幅を指定できます。
modalSpeed	Number	200	モーダルが開くスピードを指定できます。)
bgColor	String	"#000"	背景色を指定できます。
bgOpacity	Number	0.8	背景色の透過度を指定できます。
innerBgColor	String	"none"	背景色を指定できます。
innerBgPadding	Number	0	背景のpaddingを指定できます。
closeBtn	String	"×"	closeボタンを指定できます。
addClass	String	-	一番上の親要素にクラスを追加します。
fixed	bool	false	true にした場合、背景が固定されます。

---

Method

Method	Argument	Descroption
ReInit()	-	モーダル対象要素が後から追加された時に実行します。
Open( element )	String	モーダルを実行したいelementを指定します。 ( ex: ".default_open" )
Close()	-	開いているモーダル画面を閉じます。
OpenEnd = function(){};	-	モーダル画面が開いた後に実行されます。
CloseEnd = function(){};	-	モーダル画面が閉じた後に実行されます。

---

Demo

https://dsflon.github.io/ds-modal/

import DsModal from "ds-modal"

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

//

let dsModal2 = new DsModal(
    ".modal2",
    {
        width: 768,
        modalSpeed: 200,
        bgColor: "#CCC",
        bgOpacity: 0.9,
        innerBgColor: "#CCC",
        innerBgPadding: 40,
        closeBtn: "Close",
        closeCancel: false,
        addClass: "",
        fixed: true
    }
);