モーダル
概要
要素の追加・改変、コンテンツの補足説明、アラート表示の際に使用します。
展開例
動作
ボタンのスタイルについてはボタンをご覧ください。
- モーダル（小）
-
<button type="button" data-madal-target="ターゲット" data-madal-size="" data-madal-scroll="" data-func="" class="modalBtn">BTN</button>
- モーダル（中）
-
<button type="button" data-madal-target="ターゲット" data-madal-size="" data-madal-scroll="" data-func="" class="modalBtn">BTN</button>
- モーダル（大）
-
<button type="button" data-madal-target="ターゲット" data-madal-size="" data-madal-scroll="" data-func="" class="modalBtn">BTN</button>
- モーダル
（インライン） -
<button type="button" data-madal-target="ターゲット" data-madal-size="" data-madal-scroll="on" data-func="" class="modalBtn">BTN</button>
モーダルHTMLコード
- コンテンツ
-
背景 付近に配置します。IDは、ボタン側の [data-madal-target] に紐づけられます。
<div id="ターゲット" class="alertWrap"> <button type="button" class="iconClosed">閉じる</button> <h4 class="smallTitle mMinBottom">タイトル</h4> <div class="alertContents mBottom"> 中身が入ります。 </div> <nav class="tCenter"> <button type="button" data-done="" class="labelType main long doneBtn"><span>DONE</span></button> </nav> </div>
- 背景
-
BODYの一番最後に配置します。
<div id="bgPop"></div>
改変対象ファイル
- CSS:
- modules.scss 内に改変対象箇所があります。
- Javascript:
- tips.js / setModal()関数 [setAlert() modalCenter() inlineHeight() closedPopWrap() closedPopDone()]
各種設定
- トリガー
-
クリックした際、イベントを発生させます。
CLASS modalBtn
- ターゲット
-
表示させたいポップアップを指定します。
data-madal-target ポップアップ先のID名と文字（英数字）が入ります。
- サイズ
-
ポップアップの幅を指定します。
data-madal-size wide（大サイズ） / middle（中サイズ） / 空白（小サイズ）
- インライン
-
インラインスクロールを発生させるかどうかを指定します。
data-madal-scroll on（スクロール有り） / 空白（スクロール無し）
- 関数
（表示時） -
data-func モーダルを開く際に実行させる関数を指定します。 / 空白（関数無し）
- 関数
（閉じる時） -
data-done モーダルを閉じる際に実行させる関数を指定します。 / 空白（関数無し）
改変対象ファイル
- CSS:
- modules.scss 内に改変対象箇所があります。
- Javascript:
- tips.js / setModal()関数 [setAlert() modalCenter() inlineHeight() closedPopWrap() closedPopDone()]