bricks/docs/ja/modal.md
2025-11-19 12:30:39 +08:00

5.7 KiB
Raw Blame History

モーダルModal

コントロールの機能、種類(通常コントロールまたはコンテナコントロール)、親クラス

  • コントロールの機能Modal はモーダルダイアログコントロールであり、ページ上に中央揃えで表示されるフローティングパネルを提供します。主にコンテンツ、フォーム、通知メッセージの表示に使用されます。背景クリックによる閉じる操作、自動開閉、タイムアウトによる自動閉じるなどの機能をサポートしています。
  • 種類:コンテナコントロール(他の子コントロールを内包可能)
  • 親クラスbricks.BaseModal

初期化パラメータ

パラメータ名 説明
target string または Layout モーダルがマウントされる対象のコンテナ。デフォルトは bricks.Body(つまり body
auto_open boolean 作成後に自動的に open() メソッドを呼び出してモーダルを表示するかどうか。デフォルトは false
auto_close boolean マスク部分のクリックでモーダルを閉じられるようにするか(現在この機能は無効化されています)
width string/number モーダル内部パネルの幅。例:'500px''80%'
height string/number モーダル内部パネルの高さ
bgcolor string 内部パネルの背景色。デフォルトは #e8e8e8
title string モーダルのタイトル。上部のタイトルバーに表示されます
archor string 配置アンカー。値は tl, tc, tr, cl, cc, cr, bl, bc, br のいずれか。デフォルトは 'cc'(中央配置)

注:org_index および timeoutBaseModal で定義されていますが、Modal のコンストラクタのコメントには記載されていません。これらは非推奨であるか、基底クラスによって処理されている可能性があります。

主なイベント

イベント名 発生タイミング
opened open() メソッド呼び出し後に発生。モーダルが表示されたことを示します
dismissed dismiss() メソッドが呼び出され、モーダルが正常に削除された後に発生
click ユーザーがモーダルのマスク部分をクリックしたときに発生(ただし、auto_close 機能が有効な場合のみバインドされる。現状ではコメントアウト中)

ModalForm

コントロールの機能、種類(コンテナコントロールまたはコンテナコントロール)、親クラス

  • コントロールの機能ModalForm はポップアップ形式のフォーム付きモーダルコントロールであり、動的フォームを含むモーダルウィンドウをすばやく構築・表示するために使用されます。データ入力、設定変更などによく利用されます。
  • 種類:コンテナコントロール(内部に Form 子コントロールを含む)
  • 親クラスbricks.PopupWindow

初期化パラメータ

パラメータ名 説明
auto_open boolean コンストラクト後に自動的にモーダルを開くかどうか(遅延タスクにより実装)
width string/number フォームモーダルの幅
height string/number フォームモーダルの高さ
bgcolor string 背景色(親クラスに引き渡して使用)
archor string 配置方式。Modal と同じく、フォームの位置を制御
title string フォームのタイトル。フォームの上部に表示
description string フォームの説明文。タイトルの下に表示
fields array フォーム項目の設定配列。入力フィールドの構造を定義するために使用
binds array オプションのデータバインディング設定。モデルや状態との関連付けに使用
user_data any ユーザー定義データ。拡張用途に使用可能(現状では直接使用されていない)
submit_url string (コンストラクタのパラメータではない) 提出先URL外部から設定が必要。提出処理に使用

注意:ModalForm は非同期メソッド build_form を使い、0.2秒の遅延を設けてフォームを作成します。これにより、DOM環境が準備完了していることを保証します。

主なイベント

イベント名 発生タイミング
submit フォームが送信されたときに発生。フォームデータを引数として渡します
submited フォームの送信処理が完了した後に発生(Form コントロールの submited イベントから転送)。サーバーからの返信データを含みます
cancel ユーザーがキャンセルボタンをクリックしたときに発生(dismiss メソッドにバインド)
dismissed モーダルが閉じた後に発生(親クラスから継承)

説明:このコントロールは Form コントロールのイベント機構に依存しており、そのイベントをラップして転送しています。