Содержание FancyBox (fancyapps) сверху - PullRequest
Новая
       17

Содержание FancyBox (fancyapps) сверху

3 голосов
/ 22 мая 2019

Я использую fancyBox v3.5.6 от fancyApps.

Есть ли возможность отключить автоцентрирование и переместить содержимое поверх? Я не смог найти ничего, что могло бы отключить выравнивание по центру и переместить содержимое вверх. 

    var dialogMessage = '<div>This is a message</div';
       $.fancybox.open(dialogMessage,{
        //maybe here some option?
      });
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

Ответы [ 2 ]

1 голос
/ 23 мая 2019

fancybox v3 использует трюк псевдоэлемента для вертикального центрирования (вы можете получить дополнительную информацию в Google, например, см. Здесь # 4 - https://blog.logrocket.com/13-ways-to-vertical-center-in-2018-cb6e98ed8a40). Таким образом, вы можете скрыть этот элемент, и тогда ваш контент будет прямо на top. Вы можете сделать это для всех слайдов или использовать опцию slideClass, чтобы при необходимости применять произвольное имя класса, например -

JS 

$.fancybox.open({
  src : '<div class="message"><h2>Hello!</h2><p>You are awesome!</p></div>',
  type : 'html',
  slideClass : 'fancybox-top'
});

CSS 

.fancybox-top::before {
  display: none;
}

ДЕМО

https://codepen.io/anon/pen/arqzYN

1 голос
/ 22 мая 2019

Вы имеете в виду вертикальное центрирование?К сожалению, похоже, что нет возможности отключить его, поэтому вы можете сделать это, применив следующий класс CSS к классу .fancybox-content, в котором находится поле. Я сделал так, чтобы он по умолчанию заполнял содержимое, но вы можете установить желаемую ширину.если хотите, а также для верха: 

.fancybox-content {
   top: 15px !important;
   position: absolute !important;
   right: 0 !important;
   left: 0 !important;
   margin: auto !important;
   width: fit-content !important;
   width: -moz-fit-content !important;
}

Пример во фрагменте ниже: 

var dialogMessage = '<div>This is a message</div';
       $.fancybox.open(dialogMessage,{
        //maybe here some option?
      });
.fancybox-content {
    top: 15px !important;
    position: absolute !important;
    right: 0 !important;
    left: 0 !important;
    margin: auto !important;
    width: fit-content !important;
    width: -moz-fit-content !important;
  }
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
...