Menu
I want to close modal ONLY when user clicks on close btn. As I see I need to overwrite this part of code from modal.js:
hide: function (e) { e && e.preventDefault() var that = this e = $.Event('hide')//if I delete this line modal won't hide this.$element.trigger(e) if (!this.isShown || e.isDefaultPrevented()) return this.isShown = false $('body').removeClass('modal-open') escape.call(this) this.$element.removeClass('in') $.support.transition && this.$element.hasClass('fade') ? hideWithTransition.call(this) : hideModal.call(this) Am I on the right path?
636
To close a modal using vue. js you can use the click event i.e. @click to trigger change in modal visibility. So, whenever the close button is pressed the @click method will trigger the function associated with the action ( here, hiding the modal ).
Clicking on the modal “backdrop” will automatically close the modal. Bootstrap only supports one modal window at a time.
When the Button is clicked, the HTML DIV is referenced using jQuery and its modal function is called along with properties data-backdrop: "static" and data-keyboard: false which disables the closing of the Bootstrap Modal Popup when clicked outside.
Another way to dismiss the modal when clicking outside involved taking advantage of the bubbling nature of the javascript events. clicking on . modal will cause the click event to propagate like this . modal -> #modal-root -> body while clicking outside the modal will only go through #modal-root -> body .
You can define your modal behavior, defining data-keyboard and data-backdrop.
<div id="modal" class="modal hide fade in" data-keyboard="false" data-backdrop="static"> When you launch your modal you can pass the options:
{ keyboard: false, backdrop: 'static' } which will disable closing the modal by clicking the backdrop, and the escape-button. Or they can be set as data-attributes.
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
