I have two bootbox modal windows - parent and child. If user enters wrong data and try to save the parent modal window, the child window appears. The problem is - when the child window appears, it's still possible to click on the parent modal window buttons. How can I fix it? The parent window controls must be disabled when the child modal opened.

Thanks a lot,

Michael

I have two bootbox modal windows - parent and child. If user enters wrong data and try to save the parent modal window, the child window appears. The problem is - when the child window appears, it's still possible to click on the parent modal window buttons. How can I fix it? The parent window controls must be disabled when the child modal opened.

Thanks a lot,

Michael

• javascript
• twitter-bootstrap
• modal-dialog
• bootbox

Share Improve this question Follow edited Jul 24, 2018 at 5:44 rupav jain 79711 gold badge77 silver badges1414 bronze badges asked Dec 11, 2013 at 14:21 user3091443user3091443 1

• Please post some of your code to show what you've done. It might help us know where the problem is. – TecBrat Commented Dec 11, 2013 at 14:41

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Nice! Thanks a lot! But solution is more simple.. I changed the z-index of the above window. Example: z-index of the parent window is 1050. I've added style to my css file with following rows: //div.bootbox.modal.fade... is the child modal window

    div.bootbox.modal.fade.in {
         z-index:1070;
 }

//div.bootbox.modal.fade.in + div - is the next div that fades the body

div.bootbox.modal.fade.in + div {
     z-index:1060;
 }

Thanks a lot!

Michael

parent=bootbox.dialog(/*your code*/);

put following code in callback of button creating child modal

parent.find('button').prop("disabled",true);

put following code in callback of closing callback

parent.find('button').prop("disabled",false);

eg.

$('button calling child').click(function(e)
{    
    parent.find('button').prop("disabled",true);
   bootbox.dialog(
   {
    main:
      {
        callback:function(e)
        {
           parent.find('button').prop("disabled",false);
        }
      }
    });
});