42

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?

8 Answers 8

85

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">
1
  • For bootstrap 5 this is data-bs-keyboard="false" data-bs-backdrop="static"
    – VDWWD
    Commented Jul 2 at 11:55
73

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.

4
  • @Normal, I've already found it thanks. Now, I can't close previous modal, when calling another one (login -> forgot password), because of static option and when I remove static attribute and hide it fade efect stays. Can you help me if I create jsfiddle ?
    – MID
    Commented Oct 1, 2012 at 9:31
  • I can't even OPEN modal from modal in jsfiddle. Please look here - jsfiddle.net/sfWBT/493
    – MID
    Commented Oct 1, 2012 at 9:50
  • This switches the modal, and nothing more. No backdrop on the second modal, and it is positioned weird here, but might be used as a basis for further tweaks: jsfiddle.net/AWSc6
    – user176060
    Commented Oct 1, 2012 at 10:05
  • 2
    Example using the data- attributes: <div class="modal fade" data-keyboard="false" data-backdrop="static"> Commented Feb 15, 2018 at 20:33
11

Try this one

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

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>
3
  • Your second example (for already initialized modals) doesn't handle dismissing of the modal by pressing the escape key.
    – johnnyRose
    Commented Mar 2, 2017 at 18:26
  • It is true , for this reason , i had written this : "But, if you already have initialized the modal you need unbind the click event of your modal like this for example" ... For me it works =D Commented Mar 3, 2017 at 9:44
  • @johnnyRose if it's necessary disabled key-Events $('#modal-id').unbind('keyEventName') ; should help you Commented Mar 22, 2018 at 8:25
3

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.

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

You can use no-close-backdrop

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.