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

【问题标题】：How to resize colorbox after ajax success responseajax成功响应后如何调整颜色框的大小
【发布时间】：2019-09-18 08:16:14
【问题描述】：

通常让colorbox根据内容调整它的大小我使用这个sn-p：

          $('#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();
            }
          });
        }
      }
    });

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

【问题讨论】：

标签： ajax colorbox

【解决方案1】：

我创建了一个自定义函数，用于在加载内容后、调整浏览器窗口大小后或在移动设备上调整方向更改后（也有效地更改浏览器窗口宽度）后调整颜色框的大小。

现代网页设计必须处理广泛变化的浏览器宽度，尤其是手机和平板电脑上的用户如此之多，因此您加载的内容应该是响应式的，从大约 320 像素宽度开始。然后，让颜色框的大小由可用的浏览器宽度以及出于美观原因的最大合理大小来确定。

这包含在每个页面底部的 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() 函数就可以了。此外，它还可以处理其他调整大小的情况。

[Edit] 如果你真的需要调整到内部内容的宽度，那么 resize 函数应该首先获取内部内容的容器 div 的宽度，然后调整到该宽度（可能加上 colorbox padding 的宽度， ETC）。在这种情况下，resize 函数将更像是：

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

【讨论】：

谢谢！经过一些调整以适合我的应用程序，效果很好。

【解决方案2】：

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

在被调用的页面内：

<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>

希望这可以帮助将来的某个人（或者如果我忘记了我自己）。

【讨论】：