[JQUERY] jQuery : Ajax를 통해 모달 대화 상자 내용을로드합니다

jQuery : Ajax를 통해 모달 대화 상자 내용을로드합니다

해결법

1. ---

   1.Nemikor 에서이 블로그 게시물을 확인하십시오. 원하는 것을해야합니다.

   Nemikor 에서이 블로그 게시물을 확인하십시오. 원하는 것을해야합니다.

   http://blog.nemikor.com/2009/04/18/loading-a-page-into-a-dialog/

   기본적으로 '열기'를 호출하기 전에 다른 페이지에서 먼저 콘텐츠를로드하십시오.

   jQuery('#dialog').load('path to my page').dialog('open'); 
   

2. ---

   2.이것을 사용해보십시오.

   이것을 사용해보십시오.

   $(document).ready(function(){
   $.ajax({
       url: "yourPageWhereToLoadData.php",
       success: function(data){
           $("#dialog").html(data);
       }   
   });
   
   $("#dialog").dialog(
          {
           bgiframe: true,
           autoOpen: false,
           height: 100,
           modal: true
          }
   );
   });
   

3. ---

   3.

   $(function ()    {
       $('<div>').dialog({
           modal: true,
           open: function ()
           {
               $(this).load('Sample.htm');
           },         
           height: 400,
           width: 400,
           title: 'Dynamically Loaded Page'
       });
   });
   

   http://www.devcurry.com/2010/06/load-page-dynamically-inside-jquery-ui.html

4. ---

   4.

   var dialogName = '#dialog_XYZ';
   $.ajax({
           url: "/ajax_pages/my_page.ext",
           data: {....},
           success: function(data) {
             $(dialogName ).remove();
   
             $('BODY').append(data);
   
             $(dialogName )
               .dialog(options.dialogOptions);
           }
   });
   

   Ajax-Request는 대화 상자를로드하고 현재 페이지 본문에 추가하고 대화 상자를 엽니 다.

   할 수있는 콘텐츠 만로드하려는 경우 :

   var dialogName = '#dialog_XYZ';
   $.ajax({
               url: "/ajax_pages/my_page.ext",
               data: {....},
               success: function(data) {
                 $(dialogName).append(data);
   
                 $(dialogName )
                   .dialog(options.dialogOptions);
               }
   });
   

5. ---

   5.

   <button class="btn" onClick="openDialog('New Type','Sample.html')">Middle</button>
   
   <script type="text/javascript">
       function openDialog(title,url) {
           $('.opened-dialogs').dialog("close");
   
           $('<div class="opened-dialogs">').html('loading...').dialog({
               position:  ['center',20],
               open: function () {
                   $(this).load(url);
   
               },
               close: function(event, ui) {
                       $(this).remove();
               },
   
               title: title,
               minWidth: 600            
           });
   
           return false;
       }
   </script>
   

6. ---

   6.이 코드가 몇 가지 아이디어를 줄 수 있습니다.

   이 코드가 몇 가지 아이디어를 줄 수 있습니다.

   http://blog.nemikor.com/2009/04/18/loading-a-page-into-a-dialog/

   $(document).ready(function() {
       $('#page-help').each(function() {
           var $link = $(this);
           var $dialog = $('<div></div>')
               .load($link.attr('href'))
               .dialog({
                   autoOpen: false,
                   title: $link.attr('title'),
                   width: 500,
                   height: 300
               });
   
           $link.click(function() {
               $dialog.dialog('open');
   
               return false;
           });
       });
   });
   

from https://stackoverflow.com/questions/3837166/jquery-load-modal-dialog-contents-via-ajax by cc-by-sa and MIT license