ファンシーボックスをモーダル内部に追加する方法

Question

ファンシーボックスを使用して画像をモーダル内部に入れようとしています。画像をクリックすると、もう一方のモーダルが最初のものよりも上に表示されます。問題は大きな画像がメインモーダルの後ろにとどまり、スクリーンよりも大きいことです。どうすればこの問題を解決できますか？それは可能ですか、または私はfancyboxを使用するための別のページを作成する必要がありますか？前もって感謝します。モーダルコンテンツの内側

PartialView：

@foreach (var x in Model) 
{ 
<a class="fancybox" rel="group" href="@Url.Content("~/Uploads/" + x.FileName)" title="@x.FileTitle"><img src="@Url.Content("~/Uploads/" + x.FileName)" alt="" /></a> 
} 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".fancybox").fancybox({ 
      helpers: { 
       title: { 
        type: 'over' 
       } 
      } 
     }); 
    }); 
</script> 

AJAX呼び出し：

$Modal.on('show.bs.modal', function() { 
    $Modal.find(".modal-content .modal-body").html(htmlSpinner); 
    $.get('@Url.Action("ModalDetails")', { id: $(".mybutton").val() }, function (data) { 
     $Modal.find(".modal-content .modal-body").html(data); 
    }); 
}); 

コントローラー：

public PartialViewResult ModalDetails(Guid id) 
    { 
     var temp = db.Ticket_Message_Files.Where(o => o.IdTicketMessage == id && o.FileType == 0).ToList(); 
     var model = new List<DAL.Ticket_Message_Files>(); 

     foreach (var x in temp) 
     { 
      DAL.Ticket_Message_Files file = new DAL.Ticket_Message_Files 
      { 
       FileOriginalName = x.FileOriginalName, 
       FileName = x.FileName, 
       FileTitle = x.FileTitle, 
       FileType = x.FileType, 
       IdTicketMessage = x.IdTicketMessage 
      }; 
      model.Add(file); 
     } 
     return PartialView(model); 
    } 

Answer 1

あなたはモーダル-体として化粧箱にデータを追加した後fancybox({を呼び出す必要がありますので、後はまだDOMではない要素にバインドされていません。ここで0は結果がありますあなたがfancybox({関数を呼び出す必要があり体をモーダルにデータを追加すると、より多くの情報については、以下を見つけてください

$Modal.on('show.bs.modal', function() { 
    $Modal.find(".modal-content .modal-body").html(htmlSpinner); 
    $.get('@Url.Action("ModalDetails")', { id: $(".mybutton").val() }, function (data) { 
     $Modal.find(".modal-content .modal-body").html(data); 

//after appending data to modal body 
$(".fancybox").fancybox({ 
      helpers: { 
       title: { 
        type: 'over' 
       } 
      } 
     }); 
    }); 
});