时间戳

首页 > 解决方案 > ajax成功响应后如何调整颜色框的大小

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

问题描述

通常为了使颜色框根据内容调整它的大小，我使用这个片段：

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

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

标签： ajaxcolorbox

解决方案

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

现代网页设计必须处理广泛变化的浏览器宽度，尤其是手机和平板电脑上的用户如此之多，因此您加载的内容应该是响应式的，从大约 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() 函数就可以了。此外，它还可以处理其他调整大小的情况。

[编辑] 如果你真的需要调整到内部内容的宽度，那么 resize 函数应该首先获取内部内容的容器 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);
};

推荐阅读