CODEWITHSUNDEEP
twitter-bootstrapmodal-dialog
MID
MID

Reputation: 1825

How to close Bootstrap modal only when user clicks on close image?

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?

Upvotes: 42

Views: 86594

Answers (8)

jacklin
jacklin

Reputation: 2779

In bootstrap 5 you can add attributes to your modal to handle it:

<div class="modal id="staticBackdrop" 
     data-bs-backdrop="static" 
     data-bs-keyboard="false">
    < ... >
</div>

Here's a link to the docs for the full story: https://getbootstrap.com/docs/5.2/components/modal/#static-backdrop

Upvotes: 1

Mateen Ray
Mateen Ray

Reputation: 117

You can use no-close-backdrop

<div id="modal" class="modal hide fade in" no-close-on-backdrop no-close-on-keyboard>

Upvotes: 1

Arjun Singh Bisht
Arjun Singh Bisht

Reputation: 41

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">

And Moreover this, it also works in ASPX Pages.

Upvotes: 3

Tabares
Tabares

Reputation: 4335

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">

Upvotes: 85

Angel Fraga Parodi
Angel Fraga Parodi

Reputation: 790

The best way to make it in Jquery is :

<script type="text/javascript">
    $('#modal-id').modal({
        backdrop: 'static',
        keyboard: false
    });
</script>

OR in HTML:

<div id="modal-id" class="modal hide fade in" data-keyboard="false" data-backdrop="static">

But, if you already have initialized the modal you need unbind the click event of your modal like this for example:

<script type="text/javascript">
    //this remove the close button on top if you need
    $('#modal-id').find('.close').remove();
    //this unbind the event click on the shadow zone
    $('#modal-id').unbind('click');
</script>

Upvotes: 10

Tiago
Tiago

Reputation: 851

<script type="text/javascript">
    $('#myModal').modal({
      backdrop: 'static',
      keyboard: false
    })
</script>

Upvotes: 2

Vikram
Vikram

Reputation: 720

Try this one

<div id="myModal" class="modal hide fade in" data-backdrop="static">
<div> </div>
</div>

Upvotes: 11

user176060
user176060

Reputation:

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.

Upvotes: 73

Related Questions