jQuery UI 대화 상자로 페이지를로드하는 방법

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

  •  05-07-2019
  •  | 
  •  

문제

jQuery UI 대화 상자로 다른 페이지를로드 할 수 있습니까?

대화 상자 + ajax처럼

감사

도움이 되었습니까?

해결책

Ajax를 사용하여 콘텐츠를 대화 상자에로드하려면 $ .load를 쉽게 사용할 수 있습니다.

// initialize dialog
var dialog1 = $("#dialog").dialog({ autoOpen: false,
  height: 600,
  width: 350
});

// load content and open dialog
dialog1.load('path/to/otherPage').dialog('open');

예를 확인하십시오 여기.

다른 팁

jQuery UI 대화 상자의 디자인은 기존 컨텐츠가 작동하는 데 필요한 것입니다. 일반적으로 예에서는 이것이 a입니다 DIV 기존에서 가져 왔습니다 BODY 돔의.

대화 상자를 만들기 위해 기존 페이지에 마크 업을 추가하는 경우가 있습니다. 특히 AJAX에 의해 컨텐츠를로드하는 경우 문제가 발생합니다. 예를 들어, 여러 페이지에서 호출 될 수 있고 각 페이지에 마크 업을 추가하고 싶지 않은 JavaScript 라이브러리가있을 수 있습니다.

대체 방법 (이것에 영감을 받았습니다) 여기에 :

차이는 프로그래밍 방식으로 DIV를 생성한다는 것입니다 (DOM에 자동으로 추가됩니다) - 대화 상자가 닫히면 완전히 파괴하고 'Close'이벤트에서 DOM에서 제거합니다.

function JQDialog(title, contentUrl, params) {
  var dialog1 = $("<div>").dialog(
  {
     autoOpen: false,
     modal: true,
     title: title,
     close: function (e, ui) { $(this).remove(); },
     buttons: { "Ok": function () { $(this).dialog("close"); } }
  });
  dialog1.load(contentUrl).dialog('open');
}

바꾸다 dialog1.load(contentUrl).dialog('open'); 컨텐츠가로드 될 때까지 대화 상자가 열리고 잠재적으로 깜박일 수없는 경우 다음을 사용합니다. 이것은 또한 추가 작업없이 올바르게 중앙에있을 수 있습니다. 

dialog1.load(contentUrl, function () {
    $(this).dialog('open');
});

대화 상자를 만들기 위해 컨텐츠가있을 때까지 기다리는 것이 좋습니다. 나에게 더 간단 해 보인다. 또한 자동 크기는 그렇지 않으면 작동하지 않는 것 같습니다.

    $.ajax({
        'url': contentUrl,
        'success': function success(data, textStatus, xhr) {
            $("<div>" + data + "</div>").dialog({
                "width": "auto",
                "height": "auto",
                "close": function (e, ui) { $(this).remove(); }
            });
        }
    });

물론 대화 상자의 HTML에 iframe을 포함하십시오.

DOM에 주입 된 내용 대신 Iframe을 구체적으로 필요로하거나 원한다면 여기에 확장이 있습니다. http://plugins.jquery.com/project/jquery-framedialog

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