无法修复弹出元素的宽度（颜色框 jquery 覆盖）答案

【问题标题】：Can't fix the width of popup element (colorbox jquery override)无法修复弹出元素的宽度（颜色框 jquery 覆盖）
【发布时间】：2014-12-18 22:18:42
【问题描述】：

我的网站上有以下代码应该显示一个弹出窗口

<span class="fbridge-signup-form" data-widget-id="21378"></span>
<script type="text/javascript">
(function() {
  var secure = ("https:" == document.location.protocol);
  var fb_js_host = (secure ? "https://www.fanbridge.com" : "http://widget-platform.fanbridge.com");
  window._FBRIDGE_WIDGETS_HOST = fb_js_host; var p, s, id = 'fbridge-widgetjssdk-v1';
  p = document.createElement('script'); p.id = id; p.type = 'text/javascript'; p.async = true;
  p.src = (secure ? "https://ssl.fbridgecdn.net" : "http://static.fbridgecdn.net") + '/js/fb/widget/v1/platform.js?_=' + ((new Date()).getTime());
  s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(p, s);

})();
</script>

它工作正常，但问题是我的 Drupal 网站上有一些灯箱设置，使这个窗口的宽度和高度比里面的实际内容小。

我尝试使用getElementByClassName 获取元素或将width 和heightparameters 写入fbridge-signup-form 的样式属性，但没有成功。

你知道我可以做些什么来强制它具有一定的宽度和高度吗？说 480 像素乘 400 像素？

您可以在http://waytorussia.net/Moscow/Intro.html 上查看实际页面（它有一个设置为只显示一次的 cookie）。

更新：也许可以使用另一种弹出窗口，这样它就不会被我的其他设置覆盖？

【问题讨论】：

标签： javascript html css drupal-6 colorbox

【解决方案1】：

根据 HTML 源代码，您应该调整大小的元素是 (id) cboxContent。但它周围的黑框似乎还没有“准备好”（从 HTML/Css 的角度）调整大小。

在此处查看屏幕截图：

我将其调整为 400x400。

编辑 - 通过调整所有适当元素的大小，您可以设法得到您想要的。这是手动完成的示例：

只需使用现代浏览器检查元素（右键单击 > 检查），然后查看需要在加载时调整大小的 div（使用 JavaScript）。

【讨论】：

也许我可以用另一种方式来调用这个弹出窗口？
我会亲自（我认为）自己完成这项工作（弹出窗口 + css）。你认为你可以使用一些现有的库来节省一些时间吗？
当然我尝试了一些，但它们的样式会很糟糕（弹出窗口出现在不应该出现的地方）所以总是有冲突。找到一个有效的弹出窗口并且可以加载外部页面但仅限于首次访问者（因此使用 cookie）会很棒。谢谢！
看看我的编辑；）。您需要 3 分钟来检查所有元素 ID，并需要 5 分钟来编写调整大小的 javascript。注意：有 4 个角、4 个边框、一个全局包装器、内容和一种用于内容的包装器。你不需要触摸改变角落。只需调整包装器、边框和内容的大小。
我认为您的脚本已经使用了 KyleT 建议的“colorbox”模块，因为 HTML 完全相同。

【解决方案2】：

我在 Firefox 中使用开发人员工具打开了您的页面，以查看宽度和高度如何工作，结果很有趣。

基本上，灯箱的框架由许多 div 组成，所有这些似乎都被硬编码为特定的宽度和高度。当您使用检查器工具将鼠标悬停在内部内容上时，您可以看到内部内容实际上是正确的宽度和高度，但容器（您的 div 集合不是）

尝试使用 css 扩展容器 div 的高度和宽度？

我不会将此作为答案，但不幸的是，据我所知，我无法仅使用 cmets 部分提供屏幕截图。

要全屏查看图片，请在新标签页中打开它。

对于一个好的替代方案，请尝试colorbox，它是一个很棒的 JQuery 模态插件，几乎可以用于任何事情。

演示是here。看看内联 HTML 示例，它似乎与您需要的相似。

【讨论】：

你认为我可以用另一种方式来调用这个弹出窗口吗？
好吧，我个人会删除边框并使用 JQuery 自己构建它，但可以肯定地说这不是你的脚本吗？
JS 脚本是否有其他来源？像一个 css 文件？
不，CSS 加载在打开的那个 html 页面上。只是我的 Drupal 网站在某个地方对灯箱进行了特殊设置...我会检查 css...
正如文森特 G 指出的那样，问题很可能是 #cboxContent 元素没有正确调整大小，但是框架也没有被设计为容纳超过固定宽度或高度的任何东西。我会看看我是否可以为你找到一个好的替代品。

【解决方案3】：

感谢 @Vincent G 和 @KyleT 的帮助，我发现我必须编辑颜色框模块的 CSS 样式。

#cboxLoadedContent iframe{display:block; min-width: 480px; min-height: 400px; border:0;}

和

#colorbox{min-width: 480px !important; min-height: 400px !important; }

在我的 Drupal 安装中的 colorbox.css 文件中。

之后小部件加载正常。

【讨论】：