【问题标题】:FancyBox (fancyapps) content on topFancyBox (fancyapps) 内容在顶部
【发布时间】:2019-05-22 19:41:26
【问题描述】:

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

【问题讨论】:

    标签: jquery html fancybox-3


    【解决方案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

    【讨论】:

    • 我试过你的例子。它仍然是垂直中心。
    • 然后也尝试从display: inline-block;更改为display: block for .fancybox-content
    【解决方案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>

    【讨论】:

    • 您的解决方案有效,但尝试过长的内容,它看起来不太好。
    • 这就是为什么我提到他如果不想让盒子适应长文本,可以设置一个固定的宽度。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多