0
我搜索了一個星期左右的問題，我真的不知道如何解決。該對話框是模態的，只是阻止了我的頁面的一部分，我希望在所有頁面上使用對話框模式。Ajax加載的頁面和嵌套的JQuery對話框覆蓋
問題是，當我點擊過
<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="+">