Загруженные страницы Ajax и вложенное наложение Jquery Dialog

Question

Я ищу около недели с этой проблемой, и я действительно не знаю, как ее решить. Диалог является модальным и только блокирует некоторую часть моей страницы, и я хочу, чтобы диалоговое окно было модальным для всей страницы.

Проблема в том, когда я нажимаю на
<input type="button" id="AddEpisodes" value="+"> кнопка

У меня есть один div моя страница, как это:

<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>

На моей второй странице (2.jsp) у меня есть:

<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>

на странице 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>

На моей странице 4.jsp у меня есть только это

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

Answer 1

Почему бы вам не попробовать один из множества легких плагинов jQuery lightbox-y?Я использую это:

http://colorpowered.com/colorbox/

Вы также можете попробовать лайтбокс или fancybox, хотя у меня были проблемы с fancybox в IE, когда у вас на странице значительное количество изображений.