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) はスタイル付きのボタンを追加します。クリック時にモーダルを閉じるには closeOnClick に True を渡します。

Sizing

Size は、TsgcHTMLModalSize を介して msDefault、msSmall、msLarge、msXLarge、msFullscreen を選択します。

Behavior

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

Static helpers

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

Output

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

さらに詳しく

オンラインヘルプこのコンポーネントの完全な API リファレンスと使用ガイドです。
すべての sgcHTML コンポーネント80 以上のコンポーネントの全機能マトリックスを閲覧できます。
無料体験版のダウンロード30 日間の体験版には 60.HTML デモプロジェクトが付属します。
価格完全なソースコード付きの Single、Team、Site ライセンス。
最もお得な選択: All-AccesseSeGeCe の全製品にプレミアムサポートが付いて、年間 €1,059 からご利用いただけます。
All-Access の価格を見る

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

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