图像容器中的 Fancybox答案

【问题标题】：Fancybox in image container图像容器中的 Fancybox
【发布时间】：2018-09-17 12:59:48
【问题描述】：

可以设置加载fancybox（我使用fancybox 3）到图像容器吗？在文档中是不是类似的东西，也许有一些黑客可以做到这一点？

我有简单的 html：

<div id="discount-popup">
  <h2>Discount</h2>
  <form action="" method="POST">
    <label for="email-input">Email</label>
    <input id="email-input" type="email" name="email" value="" required /><br />
    <input type="submit" name="send-discount" value="Send" />
</form>

jquery 在加载页面后 5 秒后启动它：

if ($('#discount-popup').length) {
  setTimeout(function () {
    $.fancybox({
      autoSize: false,
      height: 'auto',
      minHeight: 385,
      width: 650,
      href: '/index/discount-popup',
      type: 'iframe'
    });
  }, 5000);
}

弹出窗口的内容将在图像顶部。图像容器可能是这样的：

【问题讨论】：

抱歉，不清楚您在问什么。我不知道“图像容器”是什么意思，iframe 后面的一些背景图像？你能创建一个更完整的模型吗？
图像容器是我在原始问题中发布的黑色图像。该图像应该是花式框弹出窗口，内容应该在图像顶部。我认为内容的位置不会是自定义fancybox弹出窗口的主要问题。是不是更清楚了？
你的问题到底是什么？你不知道如何使用 CSS 设置背景图片？您不知道如何调整由 fancybox 创建的 iframe 周围的间距？要不然是啥？你有没有尝试过？
我当然试过了。 Fancybox 制作了自己的包装器，自己的样式，并且不容易更改（无需更改插件中的 css）。

标签： css fancybox-3

【解决方案1】：

可能是这样的，但目前还不清楚你要求什么：

.fancybox-slide--iframe .fancybox-content {
  width  : 780px;
  height : 460px;
  margin: 0;
  padding: 50px 100px 200px 100px;
  background: transparent url(https://i.stack.imgur.com/eZUaW.jpg) top left no-repeat;
  background-size: cover;
}

https://codepen.io/anon/pen/MqzYWv?editors=1100

【讨论】：