频道导航

jQuery-FancyBox(fancyapps)内容位于顶部

2019-12-25 HTML 前端之家

前端之家收集整理的这篇文章主要介绍了jQuery-FancyBox(fancyapps)内容位于顶部，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_301_0@

我正在使用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>

最佳答案

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

fancybox-3