jQuery SimpleModal이 AJAX 요청 후 크기 조정

Question

SimpleModal 플러그인을 사용하여 사이트에 대화 상자를 표시하고 있습니다. 이 대화 상자에는 AJAX 요청을 수행 할 두 개의 링크가 있으며 해당 요청의 응답은 대화 상자의 현재 내용을 대체해야합니다. 대화 상자에 다른 응답을로드 할 수있게하려면 가능한 한 유연하게 유지하려고 노력하고 있습니다. 하나의 함수에서

나는 대화 상자를 엽니 다

$('div.modal').modal(
{ 
    minWidth: width, 
    minHeight: height, 
    onOpen: modal_onOpen, 
    onClose: modal_onClose 
}); 

으로 onClose 콜백은 다음과 같습니다

 

function modal_onClose(dialog) 
{ 
    dialog.container.fadeOut('slow', function() 
    { 
     dialog.data.hide(); 

     if(reload_dialog) 
     { 
      data = ajax_page_load(reload_url, false, false); 

      if(data.statusText == 'OK') 
      { 
       dialog.container.width(reload_width); 
       dialog.container.height(reload_height); 
       $.modal.setPosition(); 

       $('div.modal div.container').html(data.responseText); 
       dialog.data.show(); 
       dialog.container.fadeIn('slow', function() 
       { 
        $('a.simplemodal-close').bind('click', function() 
        { 
         $.modal.close(); 
        }); 
       }); 
      } 

      reload_dialog = false; 
     } 
     else 
     { 
      dialog.overlay.slideUp('slow', function() 
      { 
       $.modal.close(); 
      }); 
     } 
    }); 
} 
 

을 그리고 대화에 새로운 무언가를로드 할 때이 있습니다

 

var reload_dialog = false; 
var reload_url; 
var reload_width; 
var reload_height; 

function load_dialog(url, width, height) 
{ 
    reload_dialog = true; 

    reload_url = url; 
    reload_width = width; 
    reload_height = height; 

    $.modal.close(); 
} 
 

이제 위 코드가 모두 작동합니다. 그러나 나는 복잡한 일들에 관해서 길을 가지고 있다고 우려했다. 이유는 다음과 같습니다.

modal_onClose에서 닫기 핸들러를 대화 상자 안의 앵커에 다시 바인딩해야했습니다. 거기에 바인딩하지 않으면 앵커 태그가 대화 상자 내부에 제대로 표시 되더라도 AJAX 요청 후 대화 상자를 닫을 수 없습니다. 또한 anchor 태그를 바인딩 한 후에는 작동하지만 설정 한 onClose 애니메이션은 무시합니다.

이 모든 결과로 나는 솔루션에 대한 최선의 접근 방식을 취하지 못했다고 생각합니다.

누구나 비슷한 것을 완성 했습니까? 어떤 팁? 사전에

덕분에, 나는이 그래서 내가 다른 사람을 찾고에 대한 응답을 떠나라고 생각 해결 여기 정보 :

Answer 1

의 많이 알고있다.

근본적으로 내 문제는 내가하지 말아야 할 때 $ .modal.close()를 호출하는 것이 었습니다.

처음에 대화 상자를 다시로드하려면 $ .modal.close()를 호출하고 onClose() 콜백 내부에서 다시로드했습니다. $ .modal.close()를 호출하면 close 이벤트 핸들러를 벗겨 내고있는 것처럼 보이므로 대화 상자를 다시로드하면 문제가 발생합니다.

문제를 해결하기 위해 onClose() 콜백에서 다시로드 요청을 제거하고 일반 함수 내부의 모든 것을 처리했습니다. 콜백을 사용할 때 애니메이션을 수행하기 위해 반환 된 대화 상자 객체를 사용하고있었습니다. 이 새로운 접근 방식을 사용하면 $ ('# simplemodal-container')를 타겟팅하여 동일한 결과를 얻을 수 있습니다.

TL - 아래 코드는 AJAX를 통해 열려있는 대화 상자에 새 데이터를로드하는 동시에 대화 상자의 크기와 위치를 다시 지정할 수있게 해줍니다.로드를 처리해야

 

function pop_dialog(url, width, height) 
{ 
    $('div.modal').modal(
    { 
     minWidth: width, 
     minHeight: height, 
     onOpen: function(dialog) 
     { 
      //Animate the overlay 
      dialog.overlay.slideDown('slow', function() 
      { 
       //Make sure the contents of the dialog are showing 
       dialog.data.show(); 

       //Preload 
       $('.dialog-preloader').show(); 
       $('div.modal img.logo').show(); 

       //Fade in preloader display and perform AJAX request 
       dialog.container.fadeIn('fast', function() 
       { 
        data = ajax_page_load(url, false, false); 

        //On success, show dialog contents 
        if(data.statusText == 'OK') 
        { 
         $('div.modal div.container').html(data.responseText); 
         $('.dialog-preloader').hide(); 
        } 
       }); 
      }); 
     }, 
     onClose: function(dialog) 
     { 
      //Fade out the dialog 
      dialog.container.fadeOut('slow', function() 
      { 
       //If we're closing the dialog, animate the overlay off. 
       dialog.overlay.slideUp('slow', function() 
       { 
        //Clean up the mess. 
        $.modal.close(); 
       }); 
      }); 
     } 
    }); 
} 
 

코드 대화

 

function load_dialog(url, width, height) 
{ 
    //Hide the dialog 
    $('#simplemodal-container').fadeOut('slow', function() 
    { 
     //Hide the dialog contents and show preloader 
     $('div.modal div.container').hide() 
     $('.dialog-preloader').show(); 

     //Set the new width 
     $('#simplemodal-container').width(width); 
     $('#simplemodal-container').height(height); 
     $.modal.setPosition(); 

     //Fade container back in with preload message 
     $('#simplemodal-container').fadeIn('slow', function() 
     { 
      //Perform AJAX request to load new dialog 
      data = ajax_page_load(url, false, false); 

      //On success, show dialog contents 
      if(data.statusText == 'OK') 
      { 
       $('div.modal div.container').html(data.responseText); 
       $('.dialog-preloader').hide(); 
       $('div.modal div.container').show(); 
      } 
     }); 
    }); 
} 
 

Answer 2

$(".aModal5").click(function (e) { 
      e.preventDefault(); 


      $.modal("<div>Loading...</div>", { 
       closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>", 

       onShow: show, 
       overlayId: 'simplemodal-overlay', 
       containerId: 'simplemodal-container', 



      }); 

     }); 

쇼 기능 '다시로드'와 한 번 것 아약스 요청을 완료 :

코드는 대화 상자를 엽니 다 창 크기 조정 :

function show(dialog) { 
     $('#simplemodal-container').height('30px'); 
     $('#simplemodal-container').width('30px'); 
     xAjax.postWithLoadTarget("Default.aspx/test", null, 
     $(".divtest"), function (data) { 

      $('#simplemodal-container .simplemodal-data').fadeOut(200, function() { 

       var $this = $(this); 

       $('#simplemodal-container').animate({ height: 200 }, function() { 
        $('#simplemodal-container .simplemodal-data').html(data.d); 
        $this.fadeIn(200, function() { 

        }); 

       }); 


      }); 


     }); 

    }