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

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

Answer 2

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

FancyBox（fancyapps）内容位于顶部

2 个答案: