0

Using bootstrap modal popup I want to show a popup to inform the user a task is running. During this, the modal window may not be closed, so i added the properties:

{
  backdrop: 'static',
  keyboard: false
}

when the ajax request is finished, the content of the modal is changed. Also i can reenable the backdrop-behaviour changing the property-value. I would also like to change the keyboard-behaviour, but just changing the property does not have effect until closing and showing the popup again.

Is there a way to re-enable the esc-key without having to close the modal popup?

See also: http://jsfiddle.net/as3x6Lfp/1/

P. Zantinge
  • 185
  • 1
  • 15

2 Answers2

0

Took me some time but just found the answer in the Related section with this question. Change Bootstrap modal option once it already exists

I changed the properties to the desired values. After that i called the 'escape'-function.

Here's the code

$(".modal").data("bs.model").options.keyboard = true;
$(".modal").data("bs.modal").options.backdrop = true;
$(".modal").data("bs.modal").escape();

Update JSFiddle: http://jsfiddle.net/as3x6Lfp/2/

As you may find. It does re-enable the esc-key, but it can't be used to disable the esc-key once the modal popup is shown. This is no problem for my desired solution.

Community
  • 1
  • 1
P. Zantinge
  • 185
  • 1
  • 15
0

I think you'd need to entirely destroy and renable the modal which would require hide and then show...

$('#myModal').on('shown.bs.modal', function () {

    var progress = setInterval(function() {
    var $bar = $('.bar');

    if ($bar.width()==500) {

        // complete!

        // reset progree bar
        clearInterval(progress);
        $('.progress').removeClass('active');
        $bar.width(0);

        // update modal 
        $('#myModal .modal-body').html('Task complete. You can now close the modal.');
        $('#myModal .hide,#myModal .in').toggleClass('hide in');

        // re-enable modal allowing close
        $('#myModal').data('reenable',true);
        $('#myModal').modal('hide');
    } else {

        // perform processing logic (ajax) here
        $bar.width($bar.width()+100);
    }

    $bar.text($bar.width()/5 + "%");
    }, 600);

});

$('#myModal').on('hidden.bs.modal', function () {
    // reset modal
   if ($('#myModal').data('reenable')) {
       $(this).removeData();
       $('#myModal').modal({
          show: true
       });
   }
});

http://www.codeply.com/go/NCsThOAy3V

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • I don't want to hide the current modal and show a new one. I don't want a user to experience a new popup. Just change the message. You should see the first message as something like loading. The next message is the actual message a user needs to take some kind of action. – P. Zantinge Mar 01 '17 at 14:36