0.0.2 • Published 6 years ago
ds-modal v0.0.2
ds-modal ( Don't Need jQuery )
モーダルウィンドウ機能を実装します。
- Target browser : IE9+
- IE9の場合は transition 無しでモーダルウィンドウが表示されます。
Install
npm i ds-modal -SImport
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
}
);