Ajax pages chargées et superposition Jquery Dialog imbriquée

Question

Je recherche environ une semaine avec ce problème et je ne peux vraiment pas comment résoudre. La boîte de dialogue est modale et seule une partie de ma page est bloquée, et je veux que le dialogue soit modal sur toute la page.

Le problème est quand je clique sur le bouton
<input type="button" id="AddEpisodes" value="+">

J'ai une div ma page comme ceci:

<script> 
$(function() { 
    $('#envInfo').click(function() { 
     $("#display").html("<iframe name='view' id='view' width='100%' height='100%' marginWidth='0' marginHeight='0' frameBorder='0' scrolling='no' />"); 
     $("#view").attr("src","<%=request.getContextPath()%>/2.jsp"); 
    });  
}); 
</script> 

<div id="principal" class="ui-widget" style="position: absolute; top: 60px;z-index:-999"> 
    <div class="ui-widget-header ui-corner-tl ui-corner-tr ui-corner-tl ui-corner-tr morecss1"> 
    Message 
    </div> 
    <div class="ui-widget-content ui-corner-bl ui-corner-br morecss2"> 
      <div id="findPatient"> 
       Search: 
       <input type="text" name="patient" id="patient" style="width: 265px"> 

       <input type="submit" id="envInfo" name="envInfo" value="Aceptar"> 
      </div> 
    </div> 
</div> 

<div id="display"></div> 

Dans ma deuxième page (2.jsp) i ont:

<script> 
$(function() { 
    $("#tabs").tabs(); 
    $('.linksActive').click(function() { 
     $("#container").html("<iframe name='page' id='page' width='100%' height='100%' marginWidth='0' marginHeight='0' frameBorder='0' scrolling='no' style='width:700px;' />"); 
     $("#page").attr("src",'<%=request.getContextPath()%>/3.jsp'); 
    }); 
}); 
</script> 


<div id="area" style="position: relative; top: 100px;"> 
    <div id="information" style="padding:0 0 10px 0px;" > 
     <div class="ui-widget" > 
      <div class="ui-widget-header ui-corner-tl ui-corner-tr ui-corner-tl ui-corner-tr" style="width: 1040px;" > 
       Information 
      </div> 
      <div class="ui-widget-content ui-corner-bl ui-corner-br" style="width: 1040px;height: 70px;"> 
       <div style="float: left;"> 
        <h2> <span>Jhon doe</span></h2> 
       </div> 
      </div> 
     </div> 
    </div> 

    <div id="sidebar" style="float: left;"> 
     <div class="ui-widget" > 
      <div class="ui-widget-header ui-corner-tl ui-corner-tr ui-corner-tl ui-corner-tr" style="width: 320px;" > 
       Problemas de Salud 
      </div> 
      <div class="ui-widget-content ui-corner-bl ui-corner-br" style="width: 320px;height: 450px;"> 
       <div style="width: 310px;"> 
        <table> 
        <tr><td><a id="test" class="linksActive" href="#">Health Information</a></td></tr> 
        </table> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div id="container" style="padding:0 20px; float: left;">  
      <div id="tabs" style="top:0px;height: 460px; width:700px;"> 
       <ul> 
        <li><a href="#">Information</a></li> 
        <li><a href="#">Episodies</a></li> 
        <li><a href="#">Rest</a></li> 
       </ul> 
      </div> 
    </div> 
</div> 

dans la page 3.jsp:

<script> 
    $(function() { 
     $("#tabs").tabs(); 
     $("#tabs1").tabs(); 
     $("#dlg").dialog({ 
      bgiframe: true, 
      draggable: true, 
      resizable: false, 
      autoOpen: false, 
      modal: true, 
      height: 500, 
      width: 800 
     }); 

    }); 
    </script> 
    <script> 
     $("#AddEpisodes").live("click", function(){ 
      $("#dlg").html("<iframe name='carpetas' id='carpetas' width='100%' height='100%' marginWidth='0' marginHeight='0' frameBorder='0' scrolling='auto' />").dialog("open"); 
      $("#carpetas").attr("src","<%=request.getContextPath()%>/4.jsp"); 
     }); 
    </script> 


<div id="dlg"></div> 

      <div id="tabs" style="top:0px;height: 460px; width:690px;"> 
       <ul> 
        <li><a href="#information">Information</a></li> 
        <li><a href="#episodes">Episodies</a></li> 
        <li><a href="#rest">Rest</a></li> 
       </ul> 
         <div id="information" align="center"> 
          <p>no matter</p> 
         </div>  
         <div id="episodes"> 

          <input type="button" id="AddEpisodes" value="+"> 

         </div> 
         <div id="rest"> 
          <p>no matter</p> 
         </div> 
      </div> 

Dans ma page 4.jsp je n'ai que cette

<body> 
DIALOG CONTENT PAGE 
</body>value="+"> 

Answer 1

Pourquoi ne pas essayer un des lightbox-y jQuery légère myriade plugins? J'utilise celui-ci:

http://colorpowered.com/colorbox/

Vous pouvez essayer lightbox ou fancybox aussi, bien que j'ai eu des problèmes avec fancybox dans IE lorsque vous avez une quantité importante d'images sur la page.