Modals are dialogs that display on top of the application and block activity in the application.


Make modals accessible

Be sure to add role="dialog" and aria-labelledby="...", referencing the modal title, to .modal, and role="document" to the .modal-dialog itself.

Additionally, you may give a description of your modal dialog with aria-describedby on .modal.


Embedding YouTube videos

Embedding YouTube videos in modals requires additional JavaScript not in Bootstrap to automatically stop playback and more. See this helpful Stack Overflow post for more information.


Important things to remember:

They should always include a close button (X) in the top-right of the modal.

Opening a modal and an overlay automatically without the users consent isn't cool. No one likes it when you're looking at something and something pops up in front of you and obfuscates what you actually care about with something that you don't care about. Don't be that guy.


Check out UI-Bootstrap's documentation