ASP.NET MVC 3 JQuery와 모달 팝업 - 디스플레이로드 아이콘

Question

사람들은,

나는 ASP.NET MVC 3 응용 프로그램을하고 난 창을 모달 팝업을 표시하려면 아래의 다음 JQuery와 스크립트가 있습니다. 다음 스크립트는 모달 대화 상자를 보여줍니다. 그러나 모달 대화 상자가 열리는 동안로드 아이콘을로드하고 싶습니다. 어떻게 할 수 있니?

<%= Html.ActionLink("Details", "ProductShipping", "OnlineStore", new { ProductGUID = Html.Encode(Model.GUID) }, new { @class = "EditShippinglink", title = "Edit Product Shipping", data_dialog_id = "EditProductShipping", data_dialog_title = "Shipping Method" })%> 

JQuery와

$(".EditShippinglink").live("click", function (e) { 
      $.ajaxSetup({ cache: false }); 
      e.preventDefault(); 
      var $loading = $('<img src="/Content/ajax-loader.gif" alt="loading" class="ui-loading-icon">'); 
      $("<div></div>") 
        .addClass("dialog") 
        .attr("id", $(this) 
        .attr("data-dialog-id")) 
        .appendTo("body") 
        .dialog({ 
         title: $(this).attr("data-dialog-title"), 
         close: function() { $(this).remove() }, 
         width: 900, 
         modal: true, 
         minHeight: 500, 
         show: 'fade', 
         hide: 'fade', 
         resizable: 'false' 
        }) 
        .load(this.href); 
     }); 

Answer 1

당신은 아약스 요청이 완료 팝업의 윈도우의 내용을 변경 할 때까지 보여주고 싶은 것을 할 모달 대화 상자의 초기 HTML을 설정합니다.

비어있는 div가 $('<div></div>')으로 시작하는 대신로드가 진행되는 동안 표시하려는 HTML로로드 된 div를 사용하십시오.

@Html.ActionLink("Item Details", "Details", "Home", new { id = 1 }, new { @class = "EditShippinglink", title = "Edit Product Shipping", data_dialog_title = "Shipping Method" }) 
<div id="my-dialog" style="display:none;"> 
    <div id="my-dialog-content"></div> 
    <div id="my-dialog-progress" style="display:none;"><img src="@Url.Content("~/Content/ajax-loader.gif")" alt="loading" class="ui-loading-icon"></div> 
</div> 

<script type="text/javascript"> 
    var theDialog = $('#my-dialog').dialog({ 
     autoOpen: false, 
     modal: true, 
     closeOnEscape: false, 
     width: 900, 
     modal: true, 
     minHeight: 500, 
     show: 'fade', 
     hide: 'fade', 
     resizable: 'false' 
    }); 
    var myDialogProgress = $('#my-dialog-progress'); 
    var myDialogContent = $('#my-dialog-content'); 
    $(".EditShippinglink").on("click", function (e) { 
     $.ajaxSetup({ cache: false }); 
     e.preventDefault(); 

     myDialogProgress.show(); 
     theDialog.dialog('open'); 
     theDialog.dialog('option', 'title', $(this).attr("data-dialog-title")); 

     //clear content before showing again 
     myDialogContent.html(''); 

     $.ajax({ 
      type: 'get', 
      url: this.href, 
      dataType: 'html', 
      error: function (jqXHR, textStatus, errorThrown) { 
       //do something about the error 
      }, 
      success: function (data) { 
       //hide the progress spinner and show the html 
       myDialogProgress.hide(); 
       myDialogContent.html(data); 
      }, 
      complete: function() { 
       //do some other completion maintenance 
      } 
     }); 
    }); 

</script> 

그런 다음 대화 상자가 표시되지만로드가 완료 될 때까지 기다리면로드하는 gif가 표시됩니다. 작업이 완료되면로드가 애니메이션로드 gif html을 덮어 씁니다.