Developer Tips: Bootstrap 3 Modal Dialog exit options

March 30th, 2018

This week, Andrew Hinkle demonstrates the different types of exit strategies in Bootstrap 3 modal dialog boxes.

With Bootstrap continuing to give developers a solid and consistent design framework, one of the best parts of this package is the ability to create modal dialog boxes.

Today's short post includes various ways to exit from Bootstrap's modal dialog boxes.

These examples were all tested in Chrome, Edge, IE11, and Firefox.

Example 1 - Modal JavaScript - None

data-keyboard="false" data-backdrop="static"

The modal will close after 5 seconds.

Example 2 - Modal JavaScript - Click only

data-backdrop="static"

The cursor will still take 5 seconds to change back to the default cursor.

Example 3 - Modal JavaScript - Esc only

data-keyboard="false"

In order to allow the Esc keystroke to work you must have tabindex="-1".
The cursor will still take 5 seconds to change back to the default cursor.

Example 4 - Modal JavaScript - Click and Esc

{none}

In order to allow the Esc keystroke to work you must have tabindex="-1"...
The cursor will still take 5 seconds to change back to the default cursor.

Example 5 - Modal Data-Toggle - None

data-keyboard="false" data-backdrop="static"

Data-toggle saves you the effort of writing your own javascript if you don't mind the defaults.

Example 6 - Modal Data-Toggle - Click only

data-backdrop="static"

The other versions work the same as the JS versions.

Conclusion

Modals offer a nice simple way to prevent the user from performing any other actions until they have observed the content of the modal dialog.

The modal may just be a message to let the user know that their submission is processing.

Maybe it's an address form to stand out apart from the clutter on the rest of the page. Hopefully, these examples will help you create your own modal dialogs.

Resources: