Bootstrap 4 Modals


#1

The first thing you need to do is to create the modal on your page. Right click App in the App Structure tree and open the modals category:

Then select Modal:

In order to be able to see the modal in Design view and add content in it, just select in the App Structure (1). You can see the modal properties in the properties inspector (2). Setup the settings as you like, then you see the changes directly in Live view:

Add elements in the modal body, by clicking the add inside button:

You will see the components you can add inside, suggested in the context popup. Just add whatever you need inside the modal, customize its settings and you are ready to go:

In order to open the modal you need either a link, a button or an anchor button. Select the button (or link) which should trigger the modal (1) and open the action toggle menu (2):

Select Modal:

And then select the modal, which you want to open by clicking the button:


WapplerPrevious   WapplerNext



Notifications - Adding and General Notifications Usage
Static Modal
Cookies, Sessions and Local Storage
Wappler Official Documentation
Bootstrap 4 Visual Designer