jQuery UI对话框 - 关闭后无法打开
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery UI对话框 - 关闭后无法打开相关的知识,希望对你有一定的参考价值。
我有jquery-ui dialog box
的问题。
问题是,当我关闭对话框然后单击触发它的链接时,它不会再次弹出,除非我刷新页面。
如何在不刷新实际页面的情况下调用对话框。
以下是我的代码:
$(document).ready(function() {
$('#showTerms').click(function()
{
$('#terms').css('display','inline');
$('#terms').dialog({
resizable: false,
modal: true,
width: 400,
height: 450,
overlay: { backgroundColor: "#000", opacity: 0.5 },
buttons:{ "Close": function() { $(this).dialog("close"); } },
close: function(ev, ui) { $(this).remove(); },
});
});
谢谢
你实际上应该使用$("#terms").dialog({ autoOpen: false });
来初始化它。然后你可以使用$('#terms').dialog('open');
打开对话框,然后用$('#terms').dialog('close');
关闭它。
我使用对话框作为对话文件浏览器和上传器然后我重写这样的代码
var dialog1 = $("#dialog").dialog({
autoOpen: false,
height: 480,
width: 640
});
$('#tikla').click(function() {
dialog1.load('./browser.php').dialog('open');
});
一切似乎都很好。
我在jquery-ui覆盖对话框中遇到了同样的问题 - 它只能工作一次然后停止,除非我重新加载页面。我在他们的一个例子中找到了答案 - 同一页面上的多个叠加层 flowplayer_tools_multiple_open_close - 谁会有,对吧? :-) -
似乎是重要的环境
oneInstance: false
所以,现在我喜欢这个 -
$(document).ready(function() {
var overlays = null;
overlays = jQuery("a[rel]");
for (var n = 0; n < overlays.length; n++) {
$(overlays[n]).overlay({
oneInstance: false,
mask: '#669966',
effect: 'apple',
onBeforeLoad: function() {
overlay_before_load(this);
}
});
}
}
一切正常
希望这有助于某人
O.
jQuery文档有一个链接到这篇文章'Basic usage of the jQuery UI dialog',它解释了这种情况以及如何解决它。
嗨伙计我设法解决了它。
我使用破坏而不是关闭功能(它没有任何意义)但它有效!
$(document).ready(function() {
$('#showTerms').click(function()
{
$('#terms').css('display','inline');
$('#terms').dialog({resizable: false,
modal: true,
width: 400,
height: 450,
overlay: { backgroundColor: "#000", opacity: 0.5 },
buttons:{ "Close": function() { $(this).dialog('**destroy**'); } },
close: function(ev, ui) { $(this).close(); },
});
});
$('#form1 input#calendarTEST').datepicker({ dateFormat: 'MM d, yy' });
});
在最后一行,不要使用$(this).remove()
使用$(this).hide()
代替。
编辑:澄清一下,在关闭点击事件中你将从DOM移除#terms
div,这就是为什么它不会回来。你只需要隐藏它。
我相信你只能初始化一次对话框。上面的示例是每次单击#terms时尝试初始化对话框。这会引起问题。相反,初始化应该发生在click事件之外。您的示例应该看起来像这样:
$(document).ready(function() {
// dialog init
$('#terms').dialog({
autoOpen: false,
resizable: false,
modal: true,
width: 400,
height: 450,
overlay: { backgroundColor: "#000", opacity: 0.5 },
buttons: { "Close": function() { $(this).dialog('close'); } },
close: function(ev, ui) { $(this).close(); }
});
// click event
$('#showTerms').click(function(){
$('#terms').dialog('open').css('display','inline');
});
// date picker
$('#form1 input#calendarTEST').datepicker({ dateFormat: 'MM d, yy' });
});
我想,一旦你明白了,它应该修复你所描述的'开放链接'问题。
对我来说,这种方法有效:
单击对话框上的X或单击“Bewaren”可关闭对话框。我正在添加一个(任意)id,因为我需要确保添加到dom中的每一个html都会被删除。
$('<div id="dossier_edit_form_tmp_id">').html(data.form)
.data('dossier_id',dossier_id)
.dialog({
title: 'Opdracht wijzigen',
show: 'clip',
hide: 'clip',
minWidth: 520,
width: 520,
modal: true,
buttons: { 'Bewaren': dossier_edit_form_opslaan },
close: function(event, ui){
$(this).dialog('destroy');
$('#dossier_edit_form_tmp_id').remove();
}
});
<button onClick="abrirOpen()">Open Dialog</button>
<script type="text/javascript">
var $dialogo = $("<div></div>").html("Aqui tu contenido(here your content)").dialog({
title: "Dialogo de UI",
autoOpen: false,
close: function(ev, ui){
$(this).dialog("destroy");
}
function abrirOpen(){
$dialogo.dialog("open");
}
});
//**Esto funciona para mi... (this works for me)**
</script>
这是一个超级老线程,但由于答案甚至说“它没有任何意义”,我想我会添加答案......
原帖使用$(this).remove();在关闭处理程序中,这实际上会从DOM中删除对话框div。尝试再次初始化对话框不起作用,因为删除了div。
使用$(this).dialog('destroy')调用对话框对象中定义的方法destroy,该方法不会将其从DOM中删除。
从文档:
破坏()
完全删除对话框功能。这将使元素返回到>> pre-init状态。此方法不接受任何参数。
也就是说,如果你有充分的理由,只能在关闭时销毁或删除。
$(this).dialog('destroy');
作品!
.close()是一般的,可用于引用更多对象。 .dialog('close')只能与对话框一起使用
以上是关于jQuery UI对话框 - 关闭后无法打开的主要内容,如果未能解决你的问题,请参考以下文章