Hemant Kumar Hemant Kumar - 4 months ago 41
Javascript Question

Prevent yii modal popup from closing using jquery

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.

Answer

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
 }
});