modal-dialog

Change Bootstrap modal option once it already exists

by

To change configuration settings on already initiated Bootstrap plugin, such as the Modal, you need to access the plugin object attached to the element, like $(‘#pluginElement’).data[‘somePlugin’] and then set the options in it. For the Modal, you need: $(‘#myModal’).data(‘modal’).options.keyboard = true; JSFiddle Demo (old) For Bootstrap 3 (as mentioned in comments by @Gerald ), you … Read more

Position of navigation bar for modal view – iOS7

by

The best way to overcome this in iOS 7 is by conforming to the new UIBarPositioningDelegate protocol. You connect the delegate of your NavigationBar to your view controller (set your view controller as the delegate for the navigation bar either through storyboard or through code) and conform to that protocol and by implementing the method … Read more

How to vertically align Bootstrap v4 modal dialogs

by

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

Open bootstrap modal with vue.js 2.0

by

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”>&times;</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