Developer Tips: Bootstrap 3 Modal Dialog exit options

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

Last Updated: March 30th, 2018 • Design •
Billboard on the side of the road.

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

  • Mouse click exists: false
  • Esc keystroke exists: false

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

The modal will close after 5 seconds.


Example 2 - Modal JavaScript - Click only

  • Mouse click exists: true
  • Esc keystroke exists: false

data-backdrop="static"

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


Example 3 - Modal JavaScript - Esc only

  • Mouse click exists: false
  • Esc keystroke exists: true

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

  • Mouse click exists: true
  • Esc keystroke exists: true

{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

  • Mouse click exists: false
  • Esc keystroke exists: false

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

  • Mouse click exists: true
  • Esc keystroke exists: false

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:

Did you like this content? Show your support by buying me a coffee.

Buy me a coffee  Buy me a coffee
Picture of Andrew Hinkle

Andrew Hinkle has been developing applications since 2000 from LAMP to Full-Stack ASP.NET C# environments from manufacturing, e-commerce, to insurance.

He has a knack for breaking applications, fixing them, and then documenting it. He fancies himself as a mentor in training. His interests include coding, gaming, and writing. Mostly in that order.

comments powered by Disqus