Modal

TsgcHTMLComponent_Modal — Delphi、C++ Builder、.NET で、タイトル、本文、フッターボタン、サイズ調整、中央寄せまたは静的バックドロップを備えた Bootstrap 5 のモーダルダイアログをレンダリングします。

TsgcHTMLComponent_Modal

Bootstrap 5 の modal マークアップを出力するモーダルダイアログコンポーネントです。タイトル、本文、サイズを設定し、フッターボタンを追加してから、HTML プロパティを読み取ります — または、静的な Build ヘルパーを呼び出して一行で記述します。

コンポーネントクラス

TsgcHTMLComponent_Modal

レンダリング内容

Bootstrap 5 のモーダルマークアップ

言語

Delphi, C++ Builder, .NET

一行で構築するか、完全に設定する

手軽なモーダルには Build(id, title, body, footer, size) を呼び出すか、コンポーネントを作成して AddFooterButton でフッターボタンを追加してから、HTML を読み取ります。ダイアログを開くには BuildTriggerButton と組み合わせます。

uses
  sgcHTML_Enums, sgcHTML_Component_Modal;

// One-line static helper (primary form):
var
  vTrigger, vDialog: string;
begin
  vTrigger := TsgcHTMLComponent_Modal.BuildTriggerButton('confirmModal',
    'Delete account', bsDanger);
  vDialog := TsgcHTMLComponent_Modal.Build('confirmModal',
    'Please confirm', 'This action cannot be undone.',
    '', msDefault);
  WebModule.Response := vTrigger + vDialog;
end;

// Or configure it fully and add custom footer buttons:
var
  oModal: TsgcHTMLComponent_Modal;
begin
  oModal := TsgcHTMLComponent_Modal.Create(nil);
  try
    oModal.ModalID := 'confirmModal';
    oModal.Title := 'Please confirm';
    oModal.Body := 'This action cannot be undone.';
    oModal.Size := msLarge;
    oModal.Centered := True;
    oModal.StaticBackdrop := True;

    oModal.AddFooterButton('Cancel', bsSecondary, True);
    oModal.AddFooterButton('Delete', bsDanger);

    WebModule.Response := oModal.HTML;   // Bootstrap modal markup
  finally
    oModal.Free;
  end;
end;
// includes: sgcHTML_Enums.hpp, sgcHTML_Component_Modal.hpp

// One-line static helper (primary form):
String trigger = TsgcHTMLComponent_Modal::BuildTriggerButton("confirmModal",
  "Delete account", bsDanger);
String dialog = TsgcHTMLComponent_Modal::Build("confirmModal",
  "Please confirm", "This action cannot be undone.",
  "", msDefault);

// Or configure it fully and add custom footer buttons:
TsgcHTMLComponent_Modal *oModal = new TsgcHTMLComponent_Modal(NULL);
try
{
  oModal->ModalID = "confirmModal";
  oModal->Title = "Please confirm";
  oModal->Body = "This action cannot be undone.";
  oModal->Size = msLarge;
  oModal->Centered = true;
  oModal->StaticBackdrop = true;

  oModal->AddFooterButton("Cancel", bsSecondary, true);
  oModal->AddFooterButton("Delete", bsDanger);

  String html = oModal->HTML;   // Bootstrap modal markup
}
__finally
{
  delete oModal;
}
using esegece.sgcWebSockets;

// One-line static helper (primary form):
string trigger = TsgcHTMLComponent_Modal.BuildTriggerButton("confirmModal",
    "Delete account", TsgcHTMLButtonStyle.bsDanger);
string dialog = TsgcHTMLComponent_Modal.Build("confirmModal",
    "Please confirm", "This action cannot be undone.",
    "", TsgcHTMLModalSize.msDefault);

// Or configure it fully and add custom footer buttons:
var modal = new TsgcHTMLComponent_Modal();
modal.ModalID = "confirmModal";
modal.Title = "Please confirm";
modal.Body = "This action cannot be undone.";
modal.Size = TsgcHTMLModalSize.msLarge;
modal.Centered = true;
modal.StaticBackdrop = true;

modal.AddFooterButton("Cancel", TsgcHTMLButtonStyle.bsSecondary, true);
modal.AddFooterButton("Delete", TsgcHTMLButtonStyle.bsDanger);

string html = modal.HTML;   // Bootstrap modal markup

主なプロパティとメソッド

最もよく使うメンバーです。

Content

Title はヘッダーを設定し、Body はダイアログの内容を保持し、Footer は生のフッター HTML を受け取ります。ModalID はトリガーが使用する要素 id です。

AddFooterButton(text, style, closeOnClick) はスタイル付きのボタンを追加します。クリック時にモーダルを閉じるには closeOnClickTrue を渡します。

Sizing

Size は、TsgcHTMLModalSize を介して msDefaultmsSmallmsLargemsXLargemsFullscreen を選択します。

Behavior

Centered はダイアログを垂直方向に中央寄せし、Scrollable は長い本文をスクロールさせ、StaticBackdrop は外側クリックでの閉じる動作をブロックし、ShowClose はヘッダーの X を切り替えます。

Static helpers

Build(id, title, body, footer, size) はすぐに使えるモーダルを返します。BuildTriggerButton(modalID, text, style) は、それを開くボタンを出力します。

Output

HTML は完全な Bootstrap モーダルのマークアップを返します — そのまま配信するか、ページテンプレートの BodyContent に割り当てます。

さらに詳しく

すべての sgcHTML コンポーネント60 以上のコンポーネントの全機能マトリックスを閲覧できます。
無料体験版のダウンロード30 日間の体験版には 60.HTML デモプロジェクトが付属します。
価格完全なソースコード付きの Single、Team、Site ライセンス。

始める準備はできましたか?

無料体験版をダウンロードして、Delphi、C++ Builder、.NET で Web UI の構築を始めましょう。