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.
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:
- https://stackoverflow.com/questions/22207377/disable-click-outside-of-bootstrap-modal-area-to-close-modal
This post provided the insight on preventing the Esc keystroke and mouse click. - https://stackoverflow.com/questions/12630156/how-do-you-enable-the-escape-key-close-functionality-in-a-twitter-bootstrap-moda
This post helped me get over the hurdle with the Esc keystroke not working because I forgot the tabindex="-1". - https://codepen.io/dimbslmh/full/mKfCc
I liked how this post centered the modal in the middle of the page instead of in the top middle.
