Modal

TsgcHTMLComponent_Modal — 渲染一个 Bootstrap 5 模态对话框,带有标题、主体、页脚按钮、尺寸以及居中或静态背景,适用于 Delphi、C++ Builder 和 .NET。

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

关键属性与方法

您最常使用的成员。

内容

Title 设置页眉,Body 保存对话框内容,Footer 接受原始页脚 HTML;ModalID 是触发器使用的元素 id。

页脚按钮

AddFooterButton(text, style, closeOnClick) 追加一个样式化按钮;为 closeOnClick 传入 True 可在点击时关闭模态框。

尺寸

Size 通过 TsgcHTMLModalSize 选择 msDefaultmsSmallmsLargemsXLargemsFullscreen

行为

Centered 垂直居中对话框,Scrollable 滚动较长的主体,StaticBackdrop 阻止点击外部关闭,ShowClose 切换页眉的 X。

静态辅助方法

Build(id, title, body, footer, size) 返回一个现成的模态框;BuildTriggerButton(modalID, text, style) 发出一个打开它的按钮。

输出

HTML 返回完整的 Bootstrap 模态标记 — 直接提供服务,或将其赋给页面模板的 BodyContent

继续探索

所有 sgcHTML 组件浏览 60 多个组件的完整功能矩阵。
下载免费试用版30 天试用版附带 60.HTML 演示项目。
价格Single、Team 和 Site 授权,均含完整源代码。

准备好开始了吗?

下载免费试用版,开始在 Delphi、C++ Builder 和 .NET 中构建 Web 界面。