Как добавить Fancybox внутри модала

Question

Я пытаюсь использовать fancybox и помещать изображения внутри модального, и, когда я нажимаю на изображение, появляется еще одно модальное шоу по первому. Проблема в том, что большая картина остается за основным модальным, и она больше, чем экран. Как я могу это исправить? Возможно ли, или я должен создать другую страницу для использования 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> 

АЯКС вызова:

$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 еще так после добавления данных в модальное тело, вы должны вызвать функцию 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' 
       } 
      } 
     }); 
    }); 
});