当内容中包含对话框时，使用jQuery将内容加载到对话框中不起作用
当内容中包含对话框时，使用jQuery将内容加载到对话框中不起作用
提问于 2011-10-25 06:33:23
我有两页。第一个页面有一个对话框，通过jQuery的load()填充来自另一个页面的内容。此内容中还包含一个对话框。由于某些原因，第一次加载内容时，它工作得很好，但如果再次使用它，第二页中的对话框内容将显示为该页的一部分，而不仅仅是隐藏的对话框。
这是我快速准备好的一个示例，只是想看看它是不是页面上的其他东西，或者是我的操作方式有问题。很明显是我。:)
第1页：
<!DOCTYPE html>
<html>
<head>
<link id="Link1" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<div>
Document 1.
<a class="ajax" href="http://localhost/doc2.html" >Click Here</a>
</div>
<script>
$(document).ready(function () {
$('a.ajax').click(function () {
var url = this.href;
var dialog = $('<div></div>').appendTo('body');
dialog.load(
url,
null,
function (responseText, textStatus, XMLHttpRequest) {
dialog.dialog({
resizable: false,
modal: true,
width: '600',
height: 'auto',
position: 'center',
show: "fade",
hide: "fade",
center: true,
close: function (event, ui) {
dialog.remove();
}
});
}
);
return false;
});
});
</script>
</body>
</html>第2页：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<div>
document 2
<button id="popupButton">Click here to show popup</button>
</div>
<div id="dialog-message">
This is the popup in document 2.
</div>
<script>
$(document).ready(function () {
$("#dialog-message").dialog({
show: 'blind',
autoOpen: false,
modal: true,
resizable: false,
width: 900,
height: 400,
buttons: {
Ok: function () {
$(this).dialog("close");
}
}
});
$("#popupButton")
.button()
.click(function () {
$("#dialog-message").dialog("open");
});
});
</script>
</body>
</html>*注意-由于某些原因，第2页中的对话框无法工作，但它在我的其他页面中，所以我不担心这一点。我只是担心对话框内容出现在页面上的奇怪行为。
回答 1
Stack Overflow用户
回答已采纳
发布于 2011-10-26 03:29:50
我找到了一个解决办法，但不确定这是不是合适的解决方案。既然它能工作，我就用它来运行。
在第1页，我更改了javascript：
<script>
$(document).ready(function () {
$('a.ajax').click(function () {
var url = this.href;
var dialog1 = $('<div></div>').appendTo('body');
dialog1.load(url, null,
function (responseText, textStatus, XMLHttpRequest) {
dialog1.dialog({
resizable: false,
modal: true,
width: '600',
height: 'auto',
position: 'center',
show: "fade",
hide: "fade",
center: true,
close: function (event, ui) {
dialog1.remove();
$("#dialog-message").remove();
}
});
}
);
return false;
});
});
</script>在第2页中，我必须这样做才能使弹出窗口工作：
<script>
$(document).ready(function () {
$("#dialog-message").hide();
$("#popupButton").button().click(function () {
$("#dialog-message").dialog({
show: 'blind',
autoOpen: true,
modal: true,
resizable: false,
width: 900,
height: 400,
zIndex: 9999,
open: function(event, ui) { $("dialog-message").show(); },
buttons: {
Ok: function () {
$(this).dialog("close");
}
}
});
});
});
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7882743
复制相关文章
相似问题
腾讯云开发者
