Change Bootstrap modal option once it already exists

Question

I'm using Bootstrap Modal. I declare it, I call it, I show it...everything seems to be ok.

But what if I have an already existing modal previously shown with "keyboard" property to false and I want to change it on the go? I mean something like:

First, I create a Modal doing this (as you can see, I declare the modal putting keyboard property to false):

$('#myModal').modal({
    show: false,
    backdrop: true,
    keyboard: false
});

But then I declare this event handler, that means that if "something" happens, I want the keyboard property to be set to true.

 $('#myModal').on('shown', function(e) {
    if (something){
        $('#myModal').modal({keyboard: true});
    }
 }

So, when I go

$("#myModal").show();

The event handler is not doing what it is supposed to, as I am not getting to close the modal once Escape key is pressed. But I am completely sure that "something" is true and I have checked and re-checked that $('#myModal').modal({keyboard: true}) is executed.

Any clue as to why this isn't updating the value of configuration option?

score 50 · Accepted Answer · edited Jun 20 '20 at 09:12

50

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 need bs.modal:

$('#myModal').data('bs.modal').options.keyboard = true;

Waiting Modal Example

edited Jun 20 '20 at 09:12

Community

1
1

answered Aug 04 '12 at 18:55

merv

67,214
13
180
245

1

This works great between modal launches, but what about when the modal is already open? I moved the toggle button inside the modal here: http://jsfiddle.net/DCR4Y/10/ – Chris Barr Apr 25 '13 at 21:38
3

@ChrisBarr I showed how to do this in another answer:[Convert a Twitter Bootstrap Uncloseable Modal into a Closeable One](http://stackoverflow.com/questions/16030448/convert-a-twitter-bootstrap-uncloseable-modal-into-a-closeable-one/16040783#16040783). It depends on which properties of the modal you want to edit. For the `keyboard` property, you need to call the `escape()` method after you change the value of the property on the object in order to reinitialize it. – merv Apr 25 '13 at 22:12
Hi merv, Your solution helped me a lot. I have one problem. I am closing the modal using backdrop option on clicking outisde the modal. In modal i have a form if there are any changes in form i dont want to close the form even if they click outside. Can you see my issue http://stackoverflow.com/questions/29027047/prompt-a-warning-message-before-closing-a-modal – user2083041 Mar 13 '15 at 10:21
6

for bootstrap 3, data is named as 'bs.modal' – Gerald Jul 01 '15 at 09:44
1

Bootstrap is broken in the fiddle so I created a new example: http://www.codeply.com/go/cFSzteMbxS – Carol Skelly Mar 01 '17 at 14:30
1

@ZimSystem Nice example! Next time just add it directly (it's a community wiki). BTW, I also fixed my outdated fiddle. – merv Mar 02 '17 at 21:11
I created a feature request to add an official way to change modal options after creation. https://github.com/twbs/bootstrap/issues/35664 – tvanc Jan 06 '22 at 18:42

nokturnal · Answer 2 · 2013-12-18T02:58:18.897

A bit beyond the scope of the OP, but this is now twice I have searched for the same solution (my memory is crap) and twice that I came across this question which led me to my eventual answer. My issue was how to make an already init'ed and displayed modal, which was "closeable", into an "uncloseable" model. In the rare even that another user needs this answer, here is what I did based on the accepted answer:

*bootstrap3 used

$('#modal').off('keyup.dismiss.bs.modal'); // disable escape key
$('#modal').data('bs.modal').options.backdrop = 'static';
$('#modal button.close').hide();

Notice that I didn't change the options.keyboard property to false (followed by calling escape()) as suggested above. I could not get that to work, so after looking the Bootstrap source, I saw that all it was doing was simply removing an event listener for 'keyup.dismiss.bs.modal'.

To re-enabled things (in my scenario, when the model is hidden):

$('#modal').on('hidden.bs.modal', function (e) {
    $(this).data('bs.modal').escape(); // reset keyboard
    $(this).data('bs.modal').options.backdrop = true;
    $('button.close', $(this)).show();
});

This seems COMPLETELY clumsy and will for sure break in coming versions of Bootstrap, but works for now...

Cheers :)

Sometimes 'keyup.dismiss.bs.modal' does not work, so you can use 'keydown.dismiss.bs.modal' instead — Cava, Feb 24 '18 at 04:14

user3563059 · Answer 3 · 2018-03-13T05:05:52.070

10

For bootstrap4

To disable closing modal on escape button:

$('#myModal').off('keydown.dismiss.bs.modal');

To disable closing modal on clicking on backdrop:

$('#myModal').data('bs.modal')._config.keyboard = false;

As warned by nocturnal, this may break in the future versions of bootstrap.

edited Mar 13 '18 at 05:05

answered Mar 13 '18 at 02:19

user3563059

320
7
19

1

Disabling closing by clicking on the backdrop didn't work for me. Use this instead: `$('#myModal').data('bs.modal')._config.backdrop = 'static';` – jor Jan 16 '19 at 13:06
The backdrop disabling works for me, but the `[Esc]` disabling does not work. Bootstrap 4.2.1. – Jānis Elmeris Jun 03 '19 at 15:58
1

Actually, it works, but the backdrop disabling is permanent, whereas the `[Esc]` disabling needs to be done every time upon modal open. – Jānis Elmeris Jun 03 '19 at 16:05

score 5 · Answer 4 · answered Aug 20 '20 at 06:33

For Bootstrap 4.1

The options property should be replaced with _config.

E.G.

const modal = $('#modal');

/*
 |------------------------------------------------------------------------------
 | Now, let us assume you already opened the modal (via js or data attribute).
 | If you want to access the options and modify.
 |------------------------------------------------------------------------------
 */

// [Not Required] Let us see what the object is like.
console.log( modal.data('bs.modal')._config );

// Override the options to lock modal.
modal.data('bs.modal')._config.backdrop = 'static';
modal.data('bs.modal')._config.keyboard = false;

// [optional] You can also hide all data-dismiss buttons too.
modal.find("[data-dismiss='modal']").hide();

// Revert all actions above.
modal.data('bs.modal')._config.backdrop = true;
modal.data('bs.modal')._config.keyboard = true;
modal.find("[data-dismiss='modal']").show();

score 3 · Answer 5 · answered Oct 19 '18 at 15:53

Setting backdrop and esckey not to close the modal when the modal is already open

$('div[name="modal"]').data('bs.modal').options.backdrop = 'static';
$('div[name="modal"]').off('keydown.dismiss.bs.modal');

Unset the backdrop and key esc purpose to not close the modal

$('div[name="user_profile_modal"]').data('bs.modal').options.backdrop = true;
$('div[name="user_profile_modal"]').data('bs.modal').escape();

score 2 · Answer 6 · edited Dec 12 '15 at 00:44

2

You can also add an attribute in your HTML tag: data-keyboard="false"

<div id="myModal" class="modal hide fade" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>

It works for me!

edited Dec 12 '15 at 00:44

Community

1
1

answered Mar 22 '13 at 16:08

user2199629

59
2

Cava · Answer 7 · 2018-02-24T04:19:13.013

Another option if you do not know if the modal has already been opened or not yet and you need to configure the modal options (Bootstrap 3):

var $modal = $('#modal');
var keyboard = false; // Prevent to close by ESC
var backdrop = 'static'; // Prevent to close on click outside the modal

if(typeof $modal.data('bs.modal') === 'undefined') { // Modal did not open yet
    $modal.modal({
        keyboard: keyboard,
        backdrop: backdrop
    });
} else { // Modal has already been opened
    $modal.data('bs.modal').options.keyboard = keyboard;
    $modal.data('bs.modal').options.backdrop = backdrop;

    if(keyboard === false) { 
        $modal.off('keydown.dismiss.bs.modal'); // Disable ESC
    } else { // 
        $modal.data('bs.modal').escape(); // Resets ESC
    }
}

Thanks @nokturnal

score 1 · Answer 8 · edited Aug 12 '23 at 10:14

1

For Bootstrap 5:

You get the instance of an already existing modal by calling bootstrap.Modal.getInstance(domEl)

let domEl = $('#myModal')[0];
let bootstrapInstance = bootstrap.Modal.getInstance(domEl);
bootstrapInstance._config.show = false;
bootstrapInstance._config.backdrop = true;
bootstrapInstance._config.keyboard = false;

edited Aug 12 '23 at 10:14

Tyler2P

2,324
26
22
31

answered Aug 09 '23 at 14:54

Emily_008

11
2

score 0 · Answer 9 · answered Jul 03 '21 at 17:43

For me this method works the best

$('#modal').on('hide.bs.modal', function () {
    return false;
});

It prevents modal from closing by any possible scenario:

pressing escape key
clicking outside the modal
clicking close button
and even using of $('#modal').modal('hide')

Change Bootstrap modal option once it already exists

9 Answers9

JSFiddle Demo (old)

Waiting Modal Example

Linked

Related