如何在模态中添加Fancybox

我尝试使用fancybox,将图像放在一个模式中,当我点击图像时,另一个模式显示在第一个模式之上。问题是,大画面停留在主模式之后,比屏幕更大。我怎样才能解决这个问题?是否可能或者我必须为使用fancybox创建另一个页面?提前感谢。

模态内容内部的部分视图:

@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);
    }

结果如下: