0

Hi I am working on a yii framework. I am using Twitter bootstrap and I have loaded my popups using customize ajax so that after closing they are removed from DOM.

I want to prevent popup from closing when user by mistake click on overlay when a file is uploading. Can anyone tell me how to do this?

I found an event 'hide.bs.modal' is triggered when closing of popup is triggered but i am failing to prevent popup from closing. Please help.

@thanks hamad. I found this link Prevent Bootstrap Modal from disappearing when clicking outside or pressing escape?. Good but I need to close it only when user is uploading file. So i can't set 'backdrop' to 'static' from the start.

I have someone made the popup backdrop:static dynamically. But i am unable to dynamically remove backdrop:static property. I tried $("#model-id").data('modal').options.backdrop = false; But this do not work. My popup is still doesn't close when I click out side.

Please help.

Community
  • 1
  • 1
Curious Developer
  • 705
  • 3
  • 9
  • 29

2 Answers2

1

I found this solution earlier but writing here for other people who if stucked on this problem. This is what I did in Yii.

You either add this in your code as @hamed proposed. This will prevent closing of popup if user click out side of the popup at the overlay or press 'Esc' key.

$('#YourModalID').modal({
   backdrop: 'static',
   keyboard: false
});

OR Add data-backdrop="static" data-keyboard="false" with your model container where you have defined class='model' on model popup. This will prevent closing of popup if user click out side of the popup at the overlay or press 'Esc' key.

For dynamically controlling closing of the popup:

In script file do the following, bind your functionality with 'hide.bs.modal' event.

//this event is triggered automatically when popup is about to close
element.on('hide.bs.modal', function (e){

if( your condition met ){
   e.preventDefault(); // to prevent popup from closing by default
  //do your stuff
}
else{
// let popup close
 }
});
Curious Developer
  • 705
  • 3
  • 9
  • 29
1

The chosen answer is valid only if you use the plain bootstrap modals. In oppose to @hamed's statement, In case that you actually invoke the modal as Yii extension, then you should specify the backdrop/keyboard options while constructing the extension like:

\yii\bootstrap\Modal::begin([
    'id' => 'staffWindow',
    'header' => 'Do something',
    'clientOptions' => [
        'backdrop' => 'static'
    ]
]);
Stanimir Stoyanov
  • 1,623
  • 18
  • 29