代码之家 › 专栏 › 技术社区 › tomasr

图像容器中的Fancybox

fancybox-3 css

-1

tomasr · 技术社区 · 6 年前

我有简单的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>

加载后5s后jquery启动页面:

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

1 回复 | 直到 6 年前

1

0

Janis 6 年前

可能是这样的,但仍不清楚你要什么:

.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