Dialogue modal jQuery sur iFrame

Question

J'utilise jQuery UI dialog pour les popups modales. J'ai également quelques iframes dans ma page. La iFrame (z-Index = 1500) se trouve au-dessus de la page parent (z-index =1000). J'ouvre la boîte de dialogue modale à partir de la page parent. J'essaie de définir le z-index en utilisant $('modal').dialog('option','zIndex',3000) ; mais cela ne fonctionne pas. J'ai également essayé stack:true (pour l'empiler au sommet) et .dialog('moveToTop'), mais cela ne semble pas fonctionner.

Voici le code : Page parent :

Utilisation de la feuille de style : de "css/ui-darkness/jquery-ui-1.7.2.custom.css". utilisation de scripts : jquery-1.3.2.min.js && jquery-ui-1.7.2.custom.min.js

<script type="text/javascript" language="javascript">

  function TestModal() {
    var modal = "<div id='modal'>Hello popup world</div>";
    $(modal).dialog({
      modal: true,
      title: 'Modal Popup',
      zIndex: 12000,  // settin it here works, but I want to set it at runtime instead of setting it at design time
      close: function() {
        setTimeout(TestModal, 5000);
        $(this).remove();
      }
    });

    $('modal').dialog('option', 'zIndex', 11000); // these dont work
    $('modal').dialog('moveToTop'); // these dont work
    $('modal').dialog('option', 'stack', true); // these dont work
  }
    /** Run with defaults **/
  $(document).ready(function() {

    TestModal();

  });

  </script>
<div>
 Hello  World
 <br />

</div>

<iframe src="blocker.htm" width="100%" height="100%" frameborder="0" scrolling="no" name="myInlineFrame" 
style="z-index:10000;background-color:Gray;position:absolute;top:0px;left:0px" ALLOWTRANSPARENCY="false">
</iframe>

iframe : blocker.htm

.wrap{width:100%;height:100%}

Je suis une iframe et je suis diabolique.

Answer 1

J'utilise ce poste pour trouver l'indice Z maximal de façon dynamique et l'attribuer au moment de la conception, par exemple :

$(modal).dialog({ /* other properties */ , zIndex: $.maxZIndex()+ 1, })

Answer 2

Et si

$('#modal').closest('div.ui-dialog').css('z-index', '3000')

La boîte de dialogue jQuery UI rend un DIV avec la classe ui-dialog et il devient le parent de votre DIV original, donc j'ai utilisé le plus proche() pour la trouver (sans la référencer directement par classe au cas où il y aurait d'autres boîtes de dialogue sur la page).

Answer 3

Avez-vous essayé $('modal').dialog('zIndex', 11000) ?

Answer 4

J'ai écrit une extension qui fera ce que je pense que vous voulez réellement...

http://plugins.jquery.com/project/jquery-framedialog