는 대화 상자를 만들 JQuery와 - UI를 사용

Question

꽤 쉽게 지정 작업. 도장에서 :

var dlg = new dijit.Dialog({ 
    title:"dialog", 
    style: "width:30%;height:300px;" 
}); 
dlg.show(); 

는-UI를 jQuery를 할 수 있습니다 이렇게, html로 섹션에 지정된 것도없이 트릭을 할 단지 것? 감사합니다,

Answer 1

쉽게 새 것을 만들 수 있고 그에 대한 jquery 대화 상자를 호출 할 수 있습니다.

$("<div>hello!</div>").dialog(); 

Answer 2

var div = document.createElement('div'); 
div.innerHTML = "Hello World"; 
$(div).dialog(); 

Answer 3

기본 코드

var d = $("#someId"); 
if (d.length < 1) 
    d = $("<div/>").attr("id", "someId") 
        .appendTo("body"); 
else 
    d.dialog('destroy'); 
d.html('some message') 
.dialog({ some_options }) 
.dialog("open"); 

다윗 (여기 JQuery와 - UI를 사용해야합니다) 당신은 아마 확장 방법이 랩을 넣을 수 있습니다.

업데이트 (내 전체 코드 목록)은 내용이없는 대화 상자를 열려면 왜 내가 당신을 잘 모르겠어요 동안

(function($) { 
    $.extend({ 
     showPageDialog: function (title, content, buttons, options) { 
      /// <summary>Utility to show a dialog on the page. buttons and options are optional.</summary> 
      /// <param name="buttons" type="Object">Dialog buttons. Optional, defaults to single OK button.</param> 
      /// <param name="options" type="Object">Additional jQuery dialog options. Optional.</param> 
      if (!buttons) 
       buttons = { "Ok": function() { $(this).dialog("close"); } }; 
      var defOptions = { 
       autoOpen: false, 
       modal: true, 
       //show: "blind", 
       //hide: "explode", 
       title: title, 
       buttons: buttons 
      }; 
      if (options) 
       defOptions = $.extend(defOptions, options); 
      var pd = $("#pageDialog"); 
      if (pd.length < 1) 
       pd = $("<div/>").attr("id", "pageDialog") 
           .appendTo("body"); 
      else 
       pd.dialog('destroy'); 
      pd.html(content) 
       .dialog(defOptions) 
       .dialog("open"); 
     } 
    }//end of function show... 
)//end of extend Argument 
})(jQuery) 

샘플 사용

$.showPageDialog(title, message, { 
       "Yes": function() { 
        $(this).dialog("close"); 
        // do something for 'yes' 
       }, 
       "No": function() { 
        // do something for no 
       } 
     } 

Answer 4

Juan Ayalas 솔루션은 모달 대화 상자에서 작동해야합니다. 모달이 아닌 대화 상자에서는 함수 내부의 ID를 추적하는 것이 좋습니다. 완벽하지는 않지만 다음 코드를 사용하십시오. ID가 고유해야합니다. 이 코드는 Juan Ayalas 예제와 거의 동일하지만 중복 ID를 피하기 위해 카운터를 사용합니다. (또한 기본적으로 OK-Button을 삭제했습니다.) 빠른 회신

(function($) 
    { 
    var dCounter=0; //local but "static" var 
    $.extend({ 
    showPageDialog: function (title, content, buttons, options) { 
     /// <summary>Utility to show a dialog on the page. buttons and options are optional.</summary> 
     /// <param name="buttons" type="Object">Dialog buttons. Optional, defaults to nothing (single OK button).</param> 
     /// <param name="options" type="Object">Additional jQuery dialog options. Optional.</param> 
     if (!buttons) 
      buttons = {}; //{ "Ok": function() { $(this).dialog("close"); } }; 
     var defOptions = { 
      autoOpen: false, 
      width: "auto", 
      modal: false, 
      //show: "blind", 
      //hide: "explode", 
      title: title, 
      buttons: buttons 
     }; 
     if (options) 
      defOptions = $.extend(defOptions, options); 
     dCounter++; 
     //console.log("dCounter is " + dCounter); 
     var pdId = "#pageDialog"+dCounter;   
     var pd = $(pdId); 
     if (pd.length < 1) 
      pd = $("<div/>").attr("id", pdId)   
          .appendTo("body"); 
     else 
      pd.dialog('destroy'); 

     pd.html(content) 
      .dialog(defOptions) 
      .dialog("open"); 
    }//end of function showPageDialog 
    }//end of extend options 
)//end of extend argument 
    }//end of function definition