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

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

我正在使用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>
原文链接:https://www.f2er.com/html/530523.html

猜你在找的HTML相关文章