Question

The reason I want this is so that when the overlay shows a WHITE Background, I can add “webkit-transition-duration” property to allow the white background to nicely fade-in and out using the GPU.

But problem here is that JQUERY seems to remove/add the overlay div every time the dialog is run.

Any ideas?

Answer 1

Sure do not make the dialog modal and create the overlay yourself

set the option modal: false;

$(selector).dialog({
  modal: false
  open: function () {
     //create your own overlay div here.
  },
  close: function () {
     // remove your overlay div here.
  }
  //other options as needed
  });

now create the overlay div yourself.