Fancybox 3 多次显示 HTML 内容，而不是只显示一个白色背景的大 DIV答案

【问题标题】：Fancybox 3 is showing HTML content multiple times apart instead of just one big DIV with a white backgroundFancybox 3 多次显示 HTML 内容，而不是只显示一个白色背景的大 DIV
【发布时间】：2019-06-12 15:19:31
【问题描述】：

我正在后端代码中构建 HTML 并返回如下代码：

sb.AppendLine(string.Format("<div style='float:left; margin:10px; width:115px; height:115px; padding:5px;'><img alt='{0}' src='{1}' style='width:100px; height:100px;'/></div>", altText, imageSource));

上面的代码会构建多个图像，但我希望它显示在一个 Fancybox 父 DIV 中，带有一个带有关闭按钮的白色背景。

我确实尝试添加宽度和高度属性，但这会为每个 100 像素 x 100 像素的图像提供一个父级，例如 800 像素 x 800 像素。

我需要添加哪个属性，以便内容仅在一个 DIV 中显示在页面中心”

var GetHTML = data;

$('.ChildLinkFancybox').on('click', function () {
  var CategoryID = $(this).attr("id");
  var UserID = "<%=CurrentUserId%>";
  var CompanyID = "<%=CompanyID%>";
  var CurrentCustomerCode = "<%=CurrentCustomerCode%>";

  if (CurrentCustomerCode == "") {
     CurrentCustomerCode = "000-000";
  }

  var APIURL = $.fn.GetBaseURL() + 'DesktopModules/DNNCommon/API/Store/GetProductsForPubCategory?CategoryId=' + CategoryID + '&UserID=' + UserID + '&CompanyID=' + CompanyID;

$.ajax({
  type: "GET",
  async: true,
  url: APIURL,
  datatype: "json",
  success: function (data) {
    var GetHTML = data;
     $.fancybox.open({                      
     type: 'html',
     content: GetHTML,
     autoSize: false,                            
     });
   },
   error: function (xhr, ajaxOptions, thrownError) {
     console.log(xhr.responseText);
   }
   });
   });

【问题讨论】：

标签： jquery ajax fancybox-3

【解决方案1】：

我发现了问题。

下面的容器不起作用，因为我需要在 C# 中的 foreach 循环之外添加一个容器 div，而不是 View.ascx 文件。

<div class="MainPublishingCategoryLinkWrapper" id="mainWrapper">
    <%=GetPublishingCategoryListWithFancyBoxProducts()%>
</div>

这是添加它的正确方法，然后你应该设置一个宽度和高度。

sb.AppendLine("<div class='publishinglinksfancyboxwrapper'>");

    foreach (var product in simpleInfo)
    {
        //html being generated from server   
    }
sb.AppendLine("</div>");

【讨论】：