如何在模态框内添加 Fancybox

Question

我正在尝试使用 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);
    }

结果如下：

Answer 1

您必须在将数据附加到 modal-body 后调用 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'
                }
            }
        });
    });
});

如何在模态框内添加 Fancybox

How to add a Fancybox inside a modal

ajax

asp.net-mvc

jquery

fancybox

razor