Add Modals with Bootstrap 3 Components

Before you begin

We created a Bootstrap 3 page in Dreamweaver. Keep in mind that in order to use DMXzone Bootstrap 3 Components you need to have DMXzone Bootstrap 3 installed in your Dreamweaver.

Add a modal

Click the add new modal button. We are currently working in live view mode, and you can preview and work on the modal by clicking the show modal button. Of course you can work with modals in design view also.

Build the modal

Now, when the modal is visible, let's build it. First, click the add header button (1). Then add a modal body (2) and a footer (3).

Customize the modal header

Now, when our modal is created, we can edit its content. Let's change the text in the header.

Customize the modal body

Let's add some text inside the modal body. Click the body (1), open the insert menu (2) and add a paragraph (3).

Nest the paragraph

Select nest, in order to put the paragraph inside the modal body.

Change the body text

Now, you can change the default text. Also, you can edit the modal footer. Let's remove the default save changes button, as we do not need it right now.

Remove the default button

Right-click the button (1) and select delete (2).

Customize the modal appearance

Select an appearance effect for the modal. Our choice is fade (1). From the backdrop properties we select the default one (2) which closes the modal on click. The static one does not close the modal on click. Also you can select none if you do not want to use backdrop. Last but not least, select the escape key behavior. Choose whether it should close the modal or not. We choose to close it (3).

Select the modal size and hide it

There are three options available - small large and default. We choose the default size (1). Click the hide modal button (2), when you are done.

Add new behavior

Now, select the element (1), which should show the modal, when clicked. From the behaviors menu, add a new behavior (2) and select Control DMXzone Bootstrap 3 Components (4) from the DMXzone menu (3).

Add an action

From the component type dropdown, select modal (1) and assign a show action to it (2). When you're done, click OK (3).

Save and preview

That's how easy it is to add modals to your pages, using DMXzone Bootstrap 3 components.