Opencart 弹出窗口大小不正确答案

【问题标题】：Opencart Popup Window not sizing correctlyOpencart 弹出窗口大小不正确
【发布时间】：2014-03-11 21:39:33
【问题描述】：

我正在使用 OpenCart 1.5.6 和 YooResponsive 主题的一个版本。

当我在我的购物车中并选择估计运费时，我添加了我的状态/zip 并单击按钮，我得到一个太小的弹出框。

右侧和底部均被切断。直播网站上的 HTML 代码是：

<div id="colorbox" class="" style="padding-bottom: 57px; padding-right: 28px; top: 456px; left: 653px; position: absolute; overflow: hidden; width: 572px; height: 343px;">

如果我使用 firebug 将 width: 572px; height: 343px; 更改为 width: 600px; height: 400px; 它看起来是正确的，但我似乎无法在代码中找到任何地方来进行这些更改。

这看起来像是硬编码而不是从 css 文件中引入的。

在我的 cart.tpl 我有以下 javascript 代码：

 $.colorbox({
               overlayClose: true,
               opacity: 0.5,
               width: '600px',
               height: '400px',
               href: false,
               html: html
            });

此代码似乎设置正确，但为什么显示的尺寸不正确？

结帐流程结束时显示的条款和条件链接也可以做到这一点。我想如果我检查其他弹出框，它也会这样做。

我注意到的一件事是，对于两个弹出框（大小不同），变化的测量值与 HTML 代码中的填充完全相同 (padding-bottom: 57px; padding-right: 28px;)。所以高度总是57px 更小，宽度总是28px 更小。如果我使用 firefox 更改上面 HTML 代码中的填充，它不会使其正确显示，只有通过更改高度和宽度才会发生任何变化。

任何帮助将不胜感激。

【问题讨论】：

你能告诉我一个我可以查看的链接吗，你使用 .js 的方法是正确的，这是 colorbox 对象的工作方式，所以我不知道你为什么会遇到这些问题。
您必须转到下面的页面并表现得像在订购东西一样。只需单击底部的“添加到购物车”，然后在购物车页面上询问估算运费。 zing-cards.com/dev/storefront/index.php?route=product/…
嗯，似乎 colorbox 总是以 600x400 打开窗口，而这些是整个容器的尺寸，包括所有填充、边框、边距等。尝试将宽度和高度调整为 @987654330 @ 和 height: '457px' - 因为您无法控制填充和边距 - 这些是计算出来的 - 您至少可以提供预先计算的尺寸。但请注意，在不同的分辨率下，colorbox 也可以计算不同的填充...
所以我尝试在上面的 $.colorbox 脚本中在 cart.tpl 末尾进行更改，但没有成功。还有其他地方可以改代码吗？
我刚刚检查了一下，它改变了代码中窗口的大小（我将其设置为 800 x 600），但边缘仍然被切断。我可以让它正确显示的唯一方法是将内联 css 样式更改为正确的大小，但我找不到在哪里进行计算以创建此代码以进行更改。

标签： popup opencart

【解决方案1】：

没关系，我明白了！我有一个样式表附加到正在更改盒子大小的网站

代码是：

* {   
   -webkit-box-sizing: border-box;
   -moz-box-sizing:    border-box;
   box-sizing:         border-box;
}

我只是将这段代码添加到 stylesheet.css 中以覆盖它：

#colorbox {   
   -webkit-box-sizing: content-box !important;
   -moz-box-sizing:    content-box !important;
   box-sizing:         content-box !important;
   }

【讨论】：