Auf einen Blick

Eine Modal-Dialog-Komponente, die Bootstrap-5-modal-Markup ausgibt. Setzen Sie Titel, Inhalt und Größe, fügen Sie Fußzeilen-Schaltflächen hinzu und lesen Sie dann die HTML-Eigenschaft — oder rufen Sie den statischen Build-Helfer für einen Einzeiler auf.

Komponentenklasse

TsgcHTMLComponent_Modal

Rendert

Bootstrap-5-Modal-Markup

Familie

Overlays & Feedback

Sprachen

Delphi, C++ Builder, .NET

QuickStart

In einer Zeile erstellen oder vollständig konfigurieren

Rufen Sie Build(id, title, body, footer, size) für ein schnelles Modal auf oder erstellen Sie die Komponente, fügen Sie Fußzeilen-Schaltflächen mit AddFooterButton hinzu und lesen Sie dann HTML. Kombinieren Sie es mit BuildTriggerButton, um den Dialog zu öffnen.

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

Referenz

Wichtige Eigenschaften & Methoden

Die Member, die Sie am häufigsten verwenden.

Inhalt

Title setzt die Kopfzeile, Body enthält den Dialoginhalt und Footer nimmt rohes Fußzeilen-HTML auf; ModalID ist die von Triggern verwendete Element-id.

Fußzeilen-Schaltflächen

AddFooterButton(text, style, closeOnClick) hängt eine gestaltete Schaltfläche an; übergeben Sie True für closeOnClick, um das Modal beim Klick zu schließen.

Größenanpassung

Size wählt msDefault, msSmall, msLarge, msXLarge oder msFullscreen über TsgcHTMLModalSize.

Verhalten

Centered zentriert den Dialog vertikal, Scrollable scrollt einen langen Inhalt, StaticBackdrop verhindert das Schließen durch Klick außerhalb und ShowClose schaltet das X in der Kopfzeile um.

Statische Helfer

Build(id, title, body, footer, size) gibt ein fertiges Modal zurück; BuildTriggerButton(modalID, text, style) gibt eine Schaltfläche aus, die es öffnet.

Ausgabe

HTML gibt das vollständige Bootstrap-Modal-Markup zurück — liefern Sie es aus oder weisen Sie es dem BodyContent einer Seitenvorlage zu.

Ressourcen

Weiter entdecken

	Alle sgcHTML-KomponentenDurchsuchen Sie die vollständige Funktionsmatrix von über 60 Komponenten.	Öffnen
	Kostenlose Testversion herunterladenDie 30-Tage-Testversion enthält die 60.HTML-Demoprojekte.	Öffnen
	PreiseSingle-, Team- und Site-Lizenzen mit vollständigem Quellcode.	Öffnen

Modal

TsgcHTMLComponent_Modal