Putting a Datatable on a JQuery Dialog

DT Proger

I have a Datatable on a JQuery dialog. It works well, except that when I click the "New" tool button at the top-left corner above the Datatable, the resulting "Create new entry" light-box dialog appears BEHIND the JQuery Dialog that houses the Datatable. I would have expected that the "Create new entry" light-box dialog should show up on top of everything else, which it does not.

You can see what the issue is within the next few seconds:

Please click the link below:

http://58.64.211.82/Ed/examples/advanced/localStore3.html

On the web page that appears, click the "Show Dialog" button. Then a dialog with a Datatable on it appears.

Click the "New" tool button at the top-left corner of the Datatable, and you will see that the "Create new entry" dialog box tries to hide behind the JQuery dialog.

Please let me know the trick to get the "Create new entry" light-box dialog to hover above all else rather than hide itself behind the parent dialog.

Thanks.

allan

Its a z-index layering issue. Your jQuery dialogue has a z-index of z-index: 1003;, but the Editor lightbox is default 11.

Use the following CSS to "fix":

div.DTED_Lightbox_Wrapper {
  z-index: 1004;
}

Allan

DT Proger

Thanks Allan. That's absolutely brilliant.