Media
画像URLとYouTube動画IDを指定します。
Content types
画像、YouTube、template、既存要素を宣言的なトリガーから開きます。
DOM content
templateとclass selectorの探索範囲を確認します。
Template content
トリガーの近くに配置したtemplate要素から生成しています。
Selector content
既存DOMをouterHTMLとしてモーダルへ複製しています。
Minimal setup
<button data-modal="template[data-content]" type="button">Open</button>
<template data-content>...</template>
<script src="../dist/js-modal-module.js"></script>
<script>new MODAL_MODULE();</script>Methods
Open()による手動起動と、DOM追加後のUpdate()を確認します。
Manual open
クリックイベントからOpen()へデータと起点要素を渡します。
Manual Open()
公開メソッドを使って起動したモーダルです。
Dynamic trigger
ボタンを追加した後にUpdate()でイベントを再登録します。
Dynamic trigger
Update()後に追加トリガーから開きました。
No dynamic trigger yet.
Lifecycle
開閉イベントの発火順を画面上で確認できます。