The z index on the jquery dialog box does not work inside an iframe

advertisements

I'm using bootstrap, which uses jquery dialog. If the z-index of the dialog is set to 1 or more works fine in the stand alone script. However, when I call the same script inside an iframe. Then the dialog shows underneath the other elements on the same page. Bizarrely enough, if I try to close the dialog, I can't because it seems that the semi-transparent layer is on top of the dialog itself.

ui-dialog {
    z-index:99999999 !important;
}
.ui-widget-overlay {
    position: fixed;
    z-index:99999999 !important;
}
.ui-dialog {
    z-index:99999999 !important;
}
.fixed-dialog {
    position: fixed;
    top: 50px;
    left: 50px;
    z-index:99999999 !important;
}
.ui-dialog-titlebar {
    border-left: 30px solid transparent;
    min-height:40px;
    background-color:#f09;
    background-image:url(images/yellow_alert_icon.png);
    background-position: -22px 8px;
    background-repeat:no-repeat;
    z-index:99999999 !important;
}

I'm very stocked !!!

UPDATED CLARIFICATION: The iframe is empty. It doesn't contain any other elements. I just use it as a dialog. So the entire code inside the iframe is the same script. therefore, the parent script. the parent script isolated works fine. the moment I put it inside the iframe, when the jquery dialog pops up, it's showing underneath the parent script.


All elements of an iframe are isolated in that iframe. Any z-index value that is applied will be applied in relation to other elements inside the iframe.

The iframe itself can have a z-index, but that will affect the entire iframe and all it's contents. If you want one element in the iframe to appear above elements from the parent document, while other elements in the iframe are underneath, it isn't possible unfortunately.