モーダル

概要

要素の追加・改変、コンテンツの補足説明、アラート表示の際に使用します。

展開例

動作

ボタンのスタイルについてはボタンをご覧ください。

モーダル（小）

<button type="button" data-madal-target="ターゲット" data-madal-size="sm" 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="xl" data-madal-scroll="" data-func="" class="modalBtn">BTN</button>

モーダルHTMLコード

コンテンツ

背景付近に配置します。IDは、ボタン側の [data-madal-target] に紐づけられます。

<div id="ターゲット" class="alertWrap">
<button type="button" class="iconClosed">閉じる</button>
<h4 class="smallTitle mb-2">タイトル</h4>
<div class="alertContents mb-8">
中身が入ります。
</div>
<nav class="text-center">
<button type="button" data-done="" class="labelType main xl doneBtn"><span>DONE</span></button>
</nav>
</div>

背景

BODYの一番最後に配置します。

<div id="bgPop"></div>

各種設定

トリガー

クリックした際、イベントを発生させます。

CLASS	modalBtn

ターゲット

表示させたいポップアップを指定します。

data-madal-target	ポップアップ先のID名と文字（英数字）が入ります。

サイズ

ポップアップの幅を指定します。

data-madal-size	xl（大） / lg（中） / 空白（標準） / sm（小）

関数（表示時）

data-func	モーダルを開く際に実行させる関数を指定します。 / 空白（関数無し）

関数（閉じる時）

data-done	モーダルを閉じる際に実行させる関数を指定します。 / 空白（関数無し）

改変対象ファイル

CSS:: _ul.scss 内に改変対象箇所があります。
_ul.scssは、本番へは反映せずに、必要なUIのコードをmodules.scssに追加してください。

Javascript:: setModal()関数 [setAlert() modalCenter() inlineHeight() closedPopWrap() closedPopDone()]
必要なUIのコードをライブラリー (/temp/js/tips.js) から本番 (/common/js/tips.js) に追加してください。