jQuery UI 대화 상자-닫은 후 열리지 않음

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');닫을 수 있습니다.

---

안녕 얘들 아 나는 그것을 해결할 수 있었다.

나는 대신에 닫기 기능을 사용했지만 (말이 안되는) 작동했습니다!

$(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()대신.

편집 : 명확히하기 위해 닫기 클릭 이벤트 #terms에서 DOM 에서 div를 제거하고 있으므로 다시 오지 않습니다. 대신 숨길 필요가 있습니다.

---

대화를 한 번만 초기화 할 수 있다고 생각합니다. 위의 예는 #terms를 클릭 할 때마다 대화 상자를 초기화하려고합니다. 이로 인해 문제가 발생합니다. 대신, 초기화는 클릭 이벤트 외부에서 발생해야합니다. 귀하의 예제는 아마도 다음과 같이 보일 것입니다.

$(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를 클릭하거나 '주의'를 클릭하여 대화 상자를 닫을 수 있습니다. dom에 추가 된 모든 html이 나중에 제거되었는지 확인해야하므로 (임의) ID를 추가하고 있습니다.

$('<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 is a super old thread but since the answer even says "It doesn't make any sense", I thought I'd add the answer...

The original post used $(this).remove(); in the close handler, this would actually remove the dialog div from the DOM. Attempting to initialize a dialog again wouldn't work because the div was removed.

Using $(this).dialog('destroy') is calling the method destroy defined in the dialog object which does not remove it from the DOM.

From the documentation:

destroy()

Removes the dialog functionality completely. This will return the element back to its >>pre-init state. This method does not accept any arguments.

That said, only destroy or remove on close if you have a good reason to.

---

$(this).dialog('destroy');

works!

---

.close() is mor general and can be used in reference to more objects. .dialog('close') can only be used with dialogs

---

I use the dialog as an dialog file browser and uploader then I rewrite the code like this

var dialog1 = $("#dialog").dialog({ 
              autoOpen: false, 
              height: 480, 
              width: 640 
}); 
$('#tikla').click(function() {  
    dialog1.load('./browser.php').dialog('open');
});   

everything seems to work great.

---

I had the same problem with jquery-ui overlay dialog box - it would work only once and then stop unless i reload the page. I found the answer in one of their examples -
Multiple overlays on a same page
flowplayer_tools_multiple_open_close
- who would have though, right?? :-) -

the important setting appeared to be

oneInstance: false

so, now i have it like this -

$(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);
        }
    });

  }

}

and everything works just fine

hope this helps somebody

O.

---

The jQuery documentation has a link to this article 'Basic usage of the jQuery UI dialog' that explains this situation and how to resolve it.

참고URL : https://stackoverflow.com/questions/366854/jquery-ui-dialog-box-does-not-open-after-being-closed