Edit February 1, 2024: The inert attribute is now fully stable and can be used to prevent a user escaping a modal by making everything outside the modal inert. Additionally, you can use the dialog element with the showModal function to handle modal dialog focus automatically. Using showModal will open the dialog element as a … Read more
Update, as of Beta 3, [docs]: Add .modal-dialog-centered to .modal-dialog to vertically center the modal. Original answer: SCSS: .modal-dialog { min-height: calc(100vh – 60px); display: flex; flex-direction: column; justify-content: center; overflow: auto; @media(max-width: 768px) { min-height: calc(100vh – 20px); } } or unprefixed CSS: .modal-dialog { min-height: calc(100vh – 60px); display: flex; flex-direction: column; justify-content: … Read more
My code is based on the Michael Tranchida’s answer. Bootstrap 3 html: <div id=”app”> <div v-if=”showModal”> <transition name=”modal”> <div class=”modal-mask”> <div class=”modal-wrapper”> <div class=”modal-dialog”> <div class=”modal-content”> <div class=”modal-header”> <button type=”button” class=”close” @click=”showModal=false”> <span aria-hidden=”true”>×</span> </button> <h4 class=”modal-title”>Modal title</h4> </div> <div class=”modal-body”> modal body </div> </div> </div> </div> </div> </transition> </div> <button id=”show-modal” @click=”showModal = true”>Show … Read more
About half of the answers so far are addressing the flaws of confirmation dialogs, not of modal dialogs. While the vast majority of confirmation dialogs are modal, this does not mean that the two terms are synonymous. A modal dialog is one which puts the program into a specific mode and does not allow you … Read more
After I beautified the minified version of tinymce, i found that these may be some of the body types for windowManager.open. I’m not sure how to use them all, as all this info was gathered through trial and fail. Since the documentation is really bad, no real info can be gathered. Also here’s a link … Read more
use this: $(document).on(‘show.bs.modal’,’#myModal’, function () { alert(‘hi’); })
Angular 2 and up Bootstrap css (animation is preserved) NO JQuery NO bootstrap.js Supports custom modal content (just like accepted answer) Recently added support for multiple modals on top of each other. ` @Component({ selector: ‘app-component’, template: ` <button type=”button” (click)=”modal.show()”>test</button> <app-modal #modal> <div class=”app-modal-header”> header </div> <div class=”app-modal-body”> Whatever content you like, form fields, … Read more