ajax 成功响应后如何调整颜色框的大小

Question

通常为了让 colorbox 根据内容调整它的大小我使用这个片段：

          $('#colorbox').colorbox({
            onComplete: function () {
              $(this).colorbox.resize();
            }
          });

但是这次它不起作用，当我在 ajax 函数中尝试同样的事情时，成功响应后：

    $.ajax({
      data:number,
      dataType: "json",
      type:"POST",
      url : "payment/request1",
      cache: false,
      success: function (response) {
        console.log(response);
        if(response === true){
          $.colorbox({html:'<div id="paymentblock"><div><h2 style="color:#444;">Open app in your phone</h2></div><div style="text-align:center;"><p>Payment with '+number+'</p><img src="/images/giphy.gif"></div>'});
          $('#edit-commerce-payment-payment-details-number').css('background','#fff').val('');
          $('#colorbox').colorbox({
            onComplete: function () {
              $(this).colorbox.resize();
            }
          });
        }else{
          $.colorbox({html:'<div id="paymentblock"><div><h2 style="color:#444;">An error occurred</h2></div><div style="text-align:center;"><p>Kontakta oss.</p></div>'});
          $('#colorbox').colorbox({
            onComplete: function () {
              $(this).colorbox.resize();
            }
          });
        }
      }
    });

结果是颜色框打开时尺寸太小，没有调整大小以适合内容。我做错了什么？

Answer 1

我创建了一个自定义函数来在加载内容后调整颜色框的大小，在调整浏览器 window 后，或者在移动设备上，在方向改变后也有效地改变浏览器 window 宽度。

现代网页设计必须处理各种不同的浏览器宽度，尤其是手机和平板电脑上有这么多用户，因此您加载的内容应该是响应式的，从大约 320 像素宽度开始。然后，让 colorbox 的大小由可用的浏览器宽度以及出于审美原因的最大合理大小来确定。

这会出现在每个页面底部的 javascript 文件中：

/* Colorbox resize function */
var resizeTimer;
var resizeColorBox = function() {
    if (resizeTimer) clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
        if ($("#cboxOverlay").is(":visible")) {
            $.colorbox.resize({maxWidth:"400px",width:"95%"});
        }
    }, 300);
};

// Resize Colorbox when resizing window or changing mobile device orientation
$(window).resize(resizeColorBox);
window.addEventListener("orientationchange", resizeColorBox, false);

然后，colorbox函数本身有几个参数需要正确设置。请注意，我将 closebutton 设置为 false，因为我的 HTML 内容包含一个调用 colorbox 关闭函数的关闭按钮。

$.colorbox({
    width:"95%",
    maxWidth:400,
    maxHeight:"95%",
    speed:300,
    closeButton:false,
    onComplete : function() {
        $(this).colorbox.resize({width:"95%",maxWidth:400});
        $(window).trigger("resize");
    },
    html:'Your HTML Here'
});

因此，您的代码只需要在加载 AJAX 内容后调用 resizeColorBox() 函数，您就可以开始了。此外，它还能处理其他调整大小的情况。

[编辑] 如果您真的需要调整到内部内容的宽度，那么调整大小函数应该首先获取内部内容的容器 div 的宽度，然后调整到该宽度（可能加上颜色框填充的宽度等）。在这种情况下，调整大小函数将更符合以下内容：

var resizeColorBox = function() {
    var w = $('content_container').width() + padding_w;
    var h = $('content-container').height() + padding_h;

    if (resizeTimer) clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
        if ($("#cboxOverlay").is(":visible")) {
            $.colorbox.resize({width:w, height:h});
        }
    }, 300);
};

Answer 2

刚遇到同样的问题。我通过从被请求的页面内部调用调整大小方法来处理这个问题。（你可能做不到）

被调用页面内：

<script>
  // This resize doesn't respect the maxHeight set when initializing
  // So we calculate again, for this example 80%
  var maxHeight = parent.innerHeight * 0.8

  document.addEventListener('DOMContentLoaded', function(event) {

    // Get document height after loaded
    var documentHeight = document.documentElement.scrollHeight

    // Resize
    parent.$.colorbox.resize({
      innerHeight: Math.min(documentHeight, maxHeight),
    })
  })
</script>

希望这对以后的人（或者我自己，如果我忘记了）有所帮助。

ajax 成功响应后如何调整颜色框的大小

How to resize colorbox after ajax success response

ajax

colorbox