jQuery UI 대화 상자 - 닫힌 후에 열리지 않습니다.

StackOverflow https://stackoverflow.com/questions/366854

문제

나는 문제가있다 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(); },
    }); 
});

감사

도움이 되었습니까?

해결책 2

안녕하세요 여러분, 나는 그것을 해결했습니다.

나는 대신 닫기 기능을 사용했지만 (아무 의미가 없음) 효과가있었습니다!

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

다른 팁

당신은 실제로 사용해야합니다 $("#terms").dialog({ autoOpen: false }); 초기화합니다. 그런 다음 사용할 수 있습니다 $('#terms').dialog('open'); 대화 상자를 열고 $('#terms').dialog('close'); 닫으려면.

마지막 줄에서 사용하지 마십시오 $(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를 클릭하거나 'Bewaren'을 클릭하여 대화 상자가 닫을 수 있습니다. 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) .remove (); 닫기 핸들러에서는 실제로 DOM에서 대화 상자 DIV를 제거합니다. DIV가 제거되어 대화 상자를 다시 초기화하려고 시도하면 작동하지 않습니다.

$ (this) .dialog ( 'Destroy')을 사용하여 DOM에서 제거하지 않는 대화 상자 객체에 정의 된 메소드 파괴를 호출합니다.

문서에서 :

파괴하다()

대화 상자 기능을 완전히 제거합니다. 이렇게하면 요소가 >> 사전 인크 상태로 되돌아갑니다. 이 방법은 어떤 인수도 받아들이지 않습니다.

즉, 충분한 이유가있는 경우 닫히거나 제거하십시오.

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

공장!

.Close ()는 MOR 일반이며 더 많은 객체를 참조하여 사용할 수 있습니다. .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);
        }
    });

  }

}

그리고 모든 것이 잘 작동합니다

이것이 누군가를 돕기를 바랍니다

영형.

jQuery 문서에는이 기사에 대한 링크가 있습니다.jQuery UI 대화 상자의 기본 사용'그것은이 상황과 그것을 해결하는 방법을 설명합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top