|
<< Click to Display Table of Contents >> Navigation: Forum > bootstrap4 modal dialog example |
09-17-2021, 12:56 PM:
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
10-04-2021, 07:33 PM:
Are you basing your IWBS4 code on existing IWBS3? Do you mind sharing a sample project?
10-05-2021, 01:27 PM:
(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