javascript - z-index on jquery dialog not working inside an iframe -
i'm using bootstrap, uses jquery dialog. if z-index of dialog set 1 or more works fine in stand alone script. however, when call same script inside iframe. dialog shows underneath other elements on same page. bizarrely enough, if try close dialog, can't because seems semi-transparent layer on top of 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 stocked !!!
updated clarification: iframe empty. doesn't contain other elements. use dialog. entire code inside iframe same script. therefore, parent script. parent script isolated works fine. moment put inside iframe, when jquery dialog pops up, it's showing underneath parent script.
all elements of iframe
isolated in iframe
. z-index
value applied applied in relation other elements inside iframe
.
the iframe
can have z-index
, affect entire iframe
, it's contents. if want 1 element in iframe
appear above elements parent document, while other elements in iframe
underneath, isn't possible unfortunately.
Comments
Post a Comment