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

Question

我正在后端代码中构建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中。

我确实尝试添加width和height属性，但这为每个100px x 100px图像提供了一个父对象，例如800px x 800px。

我需要添加哪个属性，以便内容仅在一个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);
   }
   });
   }); 

Answer 1

我发现了问题。

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

<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>");