диалоговое окно пользовательского интерфейса jQuery - не открываются после закрытия
у меня проблема с 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(); },
});
});
спасибо
12 ответов:
вы на самом деле должны использовать
$("#terms").dialog({ autoOpen: false });
для его инициализации. Тогда вы можете использовать$('#terms').dialog('open');
, чтобы открыть диалоговое окно, и$('#terms').dialog('close');
, чтобы закрыть его.
Привет, ребята, мне удалось решить.
я использовал функцию destroy вместо close (это не имеет никакого смысла), но это сработало!
$(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()
вместо.изменить: чтобы уточнить, на событие close click вы удаляете
#terms
див с дом, который является, почему его не вернется. Вам просто нужно скрыть это вместо этого.
Я считаю, что вы можете инициализировать диалог только один раз. Пример выше пытается инициализировать диалоговое окно каждый раз, когда нажимается #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". Я добавляю (произвольный) идентификатор, потому что мне нужно быть уверенным, что каждый бит html, добавленный в dom, будет удален впоследствии.
$('<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 (); в обработчике close это фактически удалит диалог div из DOM. Попытка инициализировать диалог снова не будет работать, потому что div был удален.
с помощью $(this).dialog ('destroy') вызывает метод destroy, определенный в объекте dialog, который не удаляет его из объекта dialog. ДОМ.
из документации:
уничтожить()
полностью удаляет функциональность диалогового окна. Это вернет элемент обратно в состояние > > pre-init. Этот метод не принимает никаких аргументов.
Что сказал, только уничтожить или удалить на близком, если у вас есть веская причина.
.close () является mor general и может использоваться в отношении большего количества объектов. .диалог ('close') может использоваться только с диалогами
Я использую диалог в качестве браузера диалоговых файлов и загрузчика, а затем переписываю код следующим образом
var dialog1 = $("#dialog").dialog({ autoOpen: false, height: 480, width: 640 }); $('#tikla').click(function() { dialog1.load('./browser.php').dialog('open'); });
все, кажется, отлично работает.
у меня была такая же проблема с диалоговым окном jQuery-ui overlay - он будет работать только один раз, а затем остановится, если я не перезагружу страницу. Я нашел ответ в одном из их примеров -
Несколько наложений на одной странице
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); } }); } }
и все работает просто штраф в размере
надеюсь, это поможет кому-то
О.
в документации jQuery есть ссылка на эту статью - основное использование диалогового окна пользовательского интерфейса jQuery' это объясняет эту ситуацию и как ее решить.