Fancybox в контейнере изображений - PullRequest
Новая
       8

Fancybox в контейнере изображений

0 голосов
/ 17 сентября 2018

можно настроить для загрузки 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);
}

Содержимое всплывающего окна будет в верхней части изображения. Контейнер изображения может быть примерно таким:

enter image description here

1 Ответ

0 голосов
/ 18 сентября 2018

Это может быть что-то вроде этого, но до сих пор неясно, что вы просите: 

.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

...