Simple-Modal-Module

Language

• English
• 日本語

npm install simple-modal-module

Setup

<div className="js-modal-open" data-modal="sampleModal">OPEN</div>
<div className="js-modal-target" data-modal="sampleModal">
   <button class="js-modal-close" data-modal="sampleModal">CLOSE</button>
       <!--- You can make contents here --->
</div>

// Basic usage
import createModal from "simple-modal-module";
const modal = createModal("sampleModal");
// or when need override options
const modal = createModal("simpleModal", {
    animation: false
})

// methods
modal.openButtons // open button elements
modal.closeButtons // close button elements
modal.targetNodes // modal target elements
modal.showModal() // open modal
modal.hideModal() // close modal
modal.destroy() // remove evenr listeners.

// events
for (const target of targetNodes) {
  target.addEventListener("m-init", () => {});
  target.addEventListener("m-destroy", () => {});
  target.addEventListener("m-before-open", () => {});
  target.addEventListener("m-open", () => {});
  target.addEventListener("m-close", () => {});
}

// Other APIs
import {enableFixedPage, disableFixedPage} from "simple-modal-module";

// Fixed Page
enableFixedPage();

// Unfixed Page
disableFixedPage();

.js-modal-target {
  transition: opacity 0.4s ease;
  &.is-before-open {
    opacity: 0;
  }
  &.is-open {
    opacity: 1;
  }
  &.is-close {
    opacity: 0;
  }
}

Options

| key | required | default | node | |:--------------------:|:--------------:|----------------|------------------------------------------------------------------------------------------------------------| | target | | js-modal-target | You can specify the class name of the modal to be displayed. | | navigation.openEl | | js-modal-open | You can specify the class name of the button that opens the modal. | | navigation.closeEl | | js-modal-close | You can specify the class name of the button that closes the modal. | | hookClass.beforeOpen | | is-before-open | You can specify the name of the class just before the modal opens. | | hookClass.open | | is-open | You can specify the class name when the modal opens. | | hookClass.close | | is-close | You can specify the class name when the modal closes | | animation | | true | You can specify whether or not to open a modal when you click navigation.openEl or navigation.closeEl. | | autoFixed | | true | Specifies whether the page is fixed when the modal state is switched. | | dataName | | data-modal | You can specify a dataAttribute name that specifies the same modal group. |

return Values

| key | node | |:--------------------:|-------------------------------------------------| | showModal | Function to open the modal. | | hideModal | Function to close the modal. | | destroy | Function to remove a registered event listener. | | openButtons | Element list of buttons to open the modal. | | closeButtons | Element list of buttons to close the modal. | | targetNodes | Modal Elements. |

Target element's custom events

| key | description | |:-------------:|-------------------------------------------------| | m-init | Fired when a modal is created. | | m-destroy | Fired when the modal is destroyed. | | m-before-open | Fired when the modal starts to open. | | m-open | Fired when the modal opens. | | m-close | Fired when modal closes. |

npm install simple-modal-module

使い方

<div className="js-modal-open" data-modal="sampleModal">OPEN</div>
<div className="js-modal-target" data-modal="sampleModal">
   <button class="js-modal-close" data-modal="sampleModal">CLOSE</button>
       <!--- You can make contents here --->
</div>

// Basic usage
import createModal from "simple-modal-module";
const modal = createModal("sampleModal");
// or when need override options
const modal = createModal("simpleModal", {
    animation: false
})

// メソッド
modal.openButtons // open button elements
modal.closeButtons // close button elements
modal.targetNodes // modal target elements
modal.showModal() // open modal
modal.hideModal() // close modal
modal.destroy() // remove evenr listeners.

// イベント
for (const target of targetNodes) {
  target.addEventListener("m-init", () => {});
  target.addEventListener("m-destroy", () => {});
  target.addEventListener("m-before-open", () => {});
  target.addEventListener("m-open", () => {});
  target.addEventListener("m-close", () => {});
}

// Other APIs
import {enableFixedPage, disableFixedPage} from "simple-modal-module";

// Fixed Page
enableFixedPage();

// Unfixed Page
disableFixedPage();

.js-modal-target {
  transition: opacity 0.4s ease;
  &.is-before-open {
    opacity: 0;
  }
  &.is-open {
    opacity: 1;
  }
  &.is-close {
    opacity: 0;
  }
}

オプション

| key | required | default | node | |:--------------------:|:--------------:|-----------------|------------------------------------------------------------------| | target | | js-modal-target | 表示するモーダルのクラス名を指定できます | | navigation.openEl | | js-modal-open | モーダルを開くボタンのクラス名を指定できます | | navigation.closeEl | | js-modal-close | モーダルを閉じるボタンのクラス名を指定できます | | hookClass.beforeOpen | | is-before-open | モーダルが開く直前のクラス名を指定できます | | hookClass.open | | is-open | モーダルが開らく時のクラス名を指定できます | | hookClass.close | | is-close | モーダルが閉じる時のクラス名を指定できます | | animation | | true | navigation.openElやnavigation.closeElをクリックしたときにモーダルを開くかどうかを指定できます | | autoFixed | | true | モーダルの状態が切り替わったときに、ページを固定するかを指定します | | dataName | | data-modal | 同一のモーダルグループを指定するdata属性名を指定できます |

return値

| key | node | |:--------------------:|----------------------| | showModal | モーダルを開く関数 | | hideModal | モーダルを閉じる関数 | | destroy | 登録されたイベントリスナーを解除する関数 | | openButtons | モーダルを開くためのボタンのエレメントリスト | | closeButtons | モーダルを閉じるためのボタンのエレメントリスト | | targetNodes | モーダル本体のエレメント |

Target element's custom events

| key | 説明 | |:-------------:|------------------------| | m-init | モーダルがinitされた時に発火。 | | m-destroy | モーダルがdestroyされた時に発火。 | | m-before-open | モーダルが開く直前に発火。 | | m-open | モーダルが開かれる時に発火。 | | m-close | モーダルが閉じられる時に発火。 |