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

Question

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?

Conservatoire

Answer 1

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.

Rigamarole

@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 ? – Conservatoire

I can't even OPEN modal from modal in jsfiddle. Please look here - jsfiddle.net/sfWBT/493 – Conservatoire

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 – Rigamarole

Example using the data- attributes: <div class="modal fade" data-keyboard="false" data-backdrop="static"> – Hydrophobia

Answer 2

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

Urania

For bootstrap 5 this is data-bs-keyboard="false" data-bs-backdrop="static" – Adan

Answer 3

Try this one

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

Autosome

Answer 4

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>

Tess

Your second example (for already initialized modals) doesn't handle dismissing of the modal by pressing the escape key. – Constable

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 – Tess

@Constable if it's necessary disabled key-Events $('#modal-id').unbind('keyEventName') ; should help you – Tess

Answer 5

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.

Axiology

Answer 6

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

Bart

Answer 7

You can use no-close-backdrop

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

Unbutton

Answer 8

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

Jennajenne