Atozed Forums

Full Version: bootstrap4 modal dialog example
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Hi,

could please someone show example how to create modal dialog in Bootstrap4? I was using them a lot in Bootstrap 3 without problems (with TIWBSModal), but with Bootstrap 4 I'm struggling without any success.

Thanks,
Bostjan
Are you basing your IWBS4 code on existing IWBS3? Do you mind sharing a sample project?
(10-04-2021, 07:33 PM)Alexandre Machado Wrote: [ -> ]Are you basing your IWBS4 code on existing IWBS3? Do you mind sharing a sample project?

Hi,

Thank you for your response, I actually managed to make it work. Here is my example:

Code:
unit TESTSHOWMODAL;

interface

uses
  Classes, SysUtils, IWAppForm, IWApplication, IWColor, IWTypes,
  IWBS4CustomControl, IWBS4Controls, Vcl.Controls, Vcl.Forms,
  IWVCLBaseContainer, IWContainer, IWHTMLContainer, IWHTML40Container, IWRegion,
  IWBS4CustomRegion, IWBS4Region, IWVCLBaseControl, IWBaseControl,
  IWBaseHTMLControl, IWControl, IWBS4Button, IWVCLComponent,
  IWBaseLayoutComponent, IWBaseContainerLayout, IWContainerLayout,
  IWBS4LayoutMgr, IWBS4MoabDialog, IWBS4Moab, IWBS4MoabContent, IWHTMLTag;

type
  TTESTSHOWMODAL = class(TIWAppForm)
    IWBS4LayoutMgr1: TIWBS4LayoutMgr;
    IWBS4Button1: TIWBS4Button;
    IWBS4Moab1: TIWBS4Moab;
    IWBS4MoabDialog1: TIWBS4MoabDialog;
    IWBS4Region2: TIWBS4Region;
    IWBS4Region1: TIWBS4Region;
    IWBS4Button2: TIWBS4Button;
    IWBS4Region3: TIWBS4Region;
    IWBS4Text1: TIWBS4Text;
    IWBS4Region4: TIWBS4Region;
    IWBS4Text2: TIWBS4Text;
    IWBS4Button3: TIWBS4Button;
    procedure TestShow;
    procedure IWBS4Button1AsyncClick(Sender: TObject; EventParams: TStringList);
    procedure IWBS4Button1HTMLTag(ASender: TObject; ATag: TIWHTMLTag);
    procedure IWBS4Image1AsyncClick(Sender: TObject; EventParams: TStringList);
    procedure IWBS4Image1HTMLTag(ASender: TObject; ATag: TIWHTMLTag);
  public
  end;

implementation

{$R *.dfm}
procedure TTESTSHOWMODAL.IWBS4Button1AsyncClick(Sender: TObject;
  EventParams: TStringList);
begin
  IWBS4Moab1.ModalVisible:=True;
end;

procedure TTESTSHOWMODAL.IWBS4Button1HTMLTag(ASender: TObject; ATag: TIWHTMLTag);
begin
    ATag.AddStringParam('data-toggle', 'modal');
end;

procedure TTESTSHOWMODAL.TestShow;

begin
  Show;
end;

Also DFM:

Code:
object SHOWMODAL: TSHOWMODAL
  Left = 0
  Top = 0
  Width = 865
  Height = 400
  RenderInvisibleControls = True
  AllowPageAccess = True
  ConnectionMode = cmAny
  Background.Fixed = False
  LayoutMgr = IWBS4LayoutMgr1
  HandleTabs = False
  LeftToRight = True
  LockUntilLoaded = True
  LockOnSubmit = True
  ShowHint = True
  JavaScript.Strings = (

      '$(document).ready(function(){$('#39'[data-toggle="tooltip"]'#39').toolti' +
      'p();});')
  DesignLeft = 2
  DesignTop = 2
  object IWBS4Button1: TIWBS4Button
    Left = 32
    Top = 20
    Width = 200
    Height = 25
    OnHTMLTag = IWBS4Button1HTMLTag
    OnAsyncClick = IWBS4Button1AsyncClick
    IconOnRight = False
    Caption = 'Show modal'
    DataTarget = IWBS4Moab1
    ModalKeyboardEscape = False
    Tooltip.Delay = 0
    Tooltip.Trigger = 'focus hover'
  end
  object IWBS4Moab1: TIWBS4Moab
    Left = 108
    Top = 88
    Width = 441
    Height = 297
    Css = ''
    HeightRender = False
    Fade = True
    Text = ''
    WidthRender = False
    object IWBS4MoabDialog1: TIWBS4MoabDialog
      Left = 12
      Top = 20
      Width = 409
      Height = 269
      Css = ''
      HeightRender = False
      Text = ''
      WidthRender = False
      object IWBS4Region2: TIWBS4Region
        Left = 12
        Top = 8
        Width = 369
        Height = 249
        Css = ''
        HeightRender = False
        Text = ''
        WidthRender = False
        BSRegionType = bs4rtModalContent
        object IWBS4Region1: TIWBS4Region
          Left = 8
          Top = 188
          Width = 345
          Height = 57
          Css = ''
          HeightRender = False
          Text = ''
          WidthRender = False
          BSRegionType = bs4rtModalFooter
          object IWBS4Button2: TIWBS4Button
            Left = 20
            Top = 24
            Width = 121
            Height = 25
            BSButtonStyle = bs4bsPrimary
            IconOnRight = False
            Caption = 'Close'
            DataDismiss = bs4bdModal
            ModalKeyboardEscape = False
            Tooltip.Delay = 0
            Tooltip.Trigger = 'focus hover'
          end
        end
        object IWBS4Region3: TIWBS4Region
          Left = 8
          Top = 24
          Width = 345
          Height = 77
          Css = ''
          HeightRender = False
          Text = ''
          WidthRender = False
          BSRegionType = bs4rtModalHeader
          object IWBS4Text1: TIWBS4Text
            Left = 20
            Top = 24
            Width = 200
            Height = 25
            Lines.Strings = (
              '<h2>HEADER</h2>')
            RawText = True
          end
          object IWBS4Button3: TIWBS4Button
            Left = 276
            Top = 24
            Width = 64
            Height = 25
            BSButtonSize = bs4bszLarge
            BSButtonStyle = bs4bsClose
            IconOnRight = False
            Caption = ''
            DataDismiss = bs4bdModal
            ModalKeyboardEscape = False
            Tooltip.Delay = 0
            Tooltip.Trigger = 'focus hover'
          end
        end
        object IWBS4Region4: TIWBS4Region
          Left = 4
          Top = 104
          Width = 345
          Height = 77
          Css = ''
          HeightRender = False
          Text = ''
          WidthRender = False
          BSRegionType = bs4rtModalBody
          object IWBS4Text2: TIWBS4Text
            Left = 20
            Top = 24
            Width = 200
            Height = 25
            Lines.Strings = (
              'INFORMATIONS...')
            RawText = True
          end
        end
      end
    end
  end
  object IWBS4LayoutMgr1: TIWBS4LayoutMgr
    Left = 692
    Top = 108
  end
end

kind regards,
Bostjan