{{-- header --}} @php($breadcrumbs = [ 'テンプレート|サンプル'=>route('xtemplates.parts'), 'モーダル'=>null ])
{{-- 補助画面モーダル(登録画面) --}} 補助画面モーダル(登録画面) %PARTS%MODAL%SUB%ENTRY%
・登録画面からモーダルの補助画面を開く場合、Register.entry 内に show( {モーダルID}, {コンテンツURL} ) が有る為、それを使って表示する。
・画面上に1つ補助画面モーダル用のタグ <x-modal.frame key="frame" id="frame" /> を用意する。
・モーダル画面のサイズは、show() 内で、width, height の順で追加すると変更可能(,'3xl','96' のように)。
 但し、vite のコンパイルに含まれないと適用されないので、適用されない場合はコメントで記載しておく。
・モーダルから結果を送信する場合、window.parent.postMessage(data) で送信する。(parts-modal/index.blade.php 参照)
・モーダルからの結果を受信する場合、結果を受け取る為の関数 window.message(id, data) をスクリプトに記載する。
・window.message の id には、モーダルを表示した時の {モーダルID} が返される。
{{-- 補助画面モーダル(表示画面) --}} 補助画面モーダル(表示画面) %PARTS%MODAL%SUB%SHOW%FRAME%
・表示画面からモーダルの補助画面を開く場合、helper.js の Action.showModal( {モーダルID}, {コンテンツURL} ) を使って表示する。
・画面上に1つ補助画面モーダル用のタグ <x-modal.frame key="frame" id="frame" /> を用意する。
・表示専用なので、モーダルからの受信はできない。(受信したい場合は、画面側のスクリプトに記載する|module.js の ModalAction.init 参照)
・簡単な表示モーダルであれば、iframeを使わずに直接埋め込みによる対応でも可。
{{-- 補助画面モーダル(表示画面|埋め込み) --}} 補助画面モーダル(表示画面|埋め込み) %PARTS%MODAL%SUB%SHOW%EMBED%
・補助画面モーダルを直接埋め込みする場合、<x-modal.page> を継承したコンポーネントを埋め込みする。
・data-micromodal-trigger にモーダルIDを指定して表示する。
@include('user.xtemplates.parts-modal.modal')
{{-- 住所入力モーダル --}} {{-- 住所入力モーダル %PARTS%MODAL%INPUT%ADDRESS%
・<x-parts.modal-input-address> を埋め込みする。
・編集ボタンに data-micromodal-trigger="confirm_deletion" を追加して表示する。
@php($delivery = \App::make(\App\Repositories\CustomerDeliveryRepository::class)->find(11))
--}} {{-- 削除確認モーダル --}} 削除確認モーダル %PARTS%MODAL%CONFIRM%DELETE%
・削除ボタンに data-micromodal-trigger="confirm_deletion" を追加して表示する。
・画面上に削除確認モーダル用のタグ <x-modal.confirm-deletion :action="***" /> を用意する。
・削除確認モーダル用のタグの :action に削除処理のURLを指定する。
{{-- 処理確認モーダル --}} 処理確認モーダル %PARTS%MODAL%CONFIRM%ACTION%
・処理ボタンに data-micromodal-trigger="{モーダルID}" を追加して表示する。
・画面上に処理確認モーダル用のタグ <x-modal.confirm-deletion id="{モーダルID}" action="{OK時に実行する関数名}" message="{確認内容}" /> を用意する。
・処理確認モーダル用のタグの action で実行される関数をスクリプトに定義する。
{{-- アラートモーダル --}} アラートモーダル %PARTS%MODAL%ALERT%
・処理ボタンに data-micromodal-trigger="{モーダルID}" を追加して表示する。
・画面上に処理確認モーダル用のタグ <x-modal.confirm-deletion id="{モーダルID}" message="{表示メッセージ}" /> を用意する。
{{-- script --}}