FancyBox (fancyapps) 内容在顶部

Question

我正在使用来自 fancyApps 的 fancyBox v3.5.6。

是否可以禁用自动居中并将内容移到顶部？我找不到任何会禁用中心对齐并将内容向上移动的内容。

    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>

Answer 1

fancybox v3 使用伪元素技巧进行垂直居中（您可以 google 获取更多信息，例如，请参阅此处的 #4 - https://blog.logrocket.com/13-ways-to-vertical-center-in-2018-cb6e98ed8a40）。因此，您可以隐藏该元素，然后您的内容将位于顶部。您可以对所有幻灯片执行此操作，或在需要时使用 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

Answer 2

你的意思是垂直居中吗？不幸的是，似乎没有禁用它的选项，因此您可以通过将以下 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;
}

下面 sn-p 中的示例：

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>