Bootbox, two modal windows - one above another

Question

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

Answer 1

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

Answer 2

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