FancyBox2 - 标题位于顶部和底部?

2024-01-11

发现了几个类似的问题,但没有这个具体问题的答案。

有没有办法在 FancyBox2 模式/弹出窗口的顶部和底部添加标题?

我知道如何将标题放置在顶部或底部。但需要在顶部放置标题,在底部放置说明文字。

提前感谢大家..


您可以修改默认的 fancybox 模板以添加一些额外的 HTML。如下所示:

您的 HTML:

<a href='http://www.bbc.co.uk/news' class="fancybox" data-caption="caption here" title="Title here">Click</a>

JavaScript:

$(".fancybox").fancybox({
    type: 'iframe',
    beforeLoad: function() {
        var caption = this.element.attr('data-caption');
        this.tpl.wrap = '<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div><p>'+caption+'</p></div></div></div>'

    },

    helpers:  {
        title : {
            type : 'inside',
            position: 'top'
        }
    }
});

我使用 iFrame 作为示例,但这应该适用于任何 Fancybox 类型。

JS 小提琴在这里:http://jsfiddle.net/WillDonohoe/thy0om73/ http://jsfiddle.net/WillDonohoe/thy0om73/

查看 fancybox 文档的 tpl 部分以获取更多信息:http://fancyapps.com/fancybox/#docs http://fancyapps.com/fancybox/#docs

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

FancyBox2 - 标题位于顶部和底部? 的相关文章

随机推荐

  • Selenium Chrome 和 Firefox WebDriver:在 Python 中设置 HTTPS 代理

    我已经做了很多搜索 但是有很多令人困惑的片段非常相似 我尝试过使用DesiredCapabilities ChromeOptions Options和一系列的参数 但没有任何效果 它无法设置代理 例如 ChromeOptions chrom
  • 使用 socket.io 向特定用户发送更新通知

    以下是前端代码 其中storeSelUserId包含发送消息的 user id FYI 节点版本1 1 0 Socket Notification var socket io http localhost 6868 socket on co
  • cron表达式解析为java日期

    我的数据库有10 18 16 SUN MON WED FRI 那么cron表达式如何转换成Java日期呢 如何与现在的时间进行比较 还有一个是如何比较两个 cron 表达式 即10 18 16 SUN MON WED FRI and 0 3
  • 流畅的 nhibernate 映射问题:多对多自连接附加数据

    我正在努力处理以下 sql 表的映射 Post PostRelation PostId 1 ParentPostId other stuff 1 ChildPostId RelationType 理想情况下 我希望帖子上有一个名为相关帖子的
  • Asp.net Identity 2.0自定义登录方法

    我正在使用 Identity 2 0 开发 ASP NET 5 应用程序 我有两种类型的用户 正常 他们使用标准登录方法进行身份验证 临时 他们应该根据提供的令牌登录 我不想存储临时用户 除了验证用户所需的信息 某些用户名和令牌 如果用户提
  • plot.nn 中的错误:未计算权重

    我在尝试绘制神经网络时收到一条错误消息 我一开始能够正常运行代码 然后就停止了 运行 Neuronet 函数时 我没有收到错误消息 任何帮助 将不胜感激 我预测贷款违约 library neuralnet library plyr Cred
  • __has_trivial_copy 在 clang 和 gcc 中的行为不同。谁是对的?

    std is trivially copyable这两个编译器仍然不支持 至少到 gcc 4 6 为止 但两者都提供 has trivial copy做得很好的指令 除非涉及已删除的复制构造函数 struct A A A const del
  • iOS 为 uiwebview 内容启用 AirPrint

    我对 XCode 和应用程序开发非常陌生 我目前正在 iPad 上的 uiwebviews 中加载基于 Web 的应用程序 当加载某一特定页面时 它会显示一个 pdf 文件 我希望能够使用 AirPrint 打印此 pdf 文件 我正在寻找
  • 在 Visual Studio 中编译单个类/文件

    我只是想知道我们是否可以在 Visual Studio 中编译单个文件 类 我经常只更改一个文件 但最终会编译整个项目 这可能是一个微不足道的案例 但会非常有帮助 我正在使用 Visual Studio 2005 处理 net 2 0 中的
  • MySQL获取两个值之间的随机值

    我有两列连续 min value max value 有没有办法进行如下选择 SELECT RAND min v max v foo 我确实意识到RAND做不同的事情 我最接近的 在帮助下 是 RAND max min min 尽管它会产生
  • 在 Dart Angular 中,如何将函数传递给组件

    我有一个组件 MyComp 我想将一个函数作为参数传递给它 更准确地说 我想做这样的事情 飞镖组件文件 NgComponent selector mycomp publishAs ctrl map const myfunc gt myfun
  • Visual Studio 2008 中的“撤消”功能停止工作

    I ll be coding along in Visual Studio 2008 and eventually I make a mistake I press CTRL Z to undo and NOTHING HAPPENS I
  • Visual Studio 2008 - 添加引用

    当添加 DLL 作为对 ASP Net 项目的引用时 VS2008 会向 bin 目录添加几个文件 如果DLL名为foo dll VS2008会添加foo dll refresh foo pdb和foo xml 我知道foo dll是什么
  • 使用 javascript .replace regex 将数字括在括号中

    我有这个字符串 我试图用括号括住后面的数字数组 位置 和颜色 str Label 3 1 位置 115 234 宽度 126 高度 20 文本 另一个按钮 字体大小 18 颜色 0 0 0 1 我可以使用这个正则表达式来做到这一点 但前提是
  • CSR 是否需要使用匹配的私钥进行签名?

    使用 OpenSSL 生成 CSR 时 您有两个选择 1 生成CSR时生成私钥 2 使用私钥导出公钥并使用公钥创建CSR CSR 是否需要使用匹配的私钥进行签名 以便 CA 对其进行验证 假设 如果我有两个密钥对 PubKey1 PrivK
  • 运行代码时将 Access Report 导出到保存的 PDF 文件的简单 VBA 代码

    我在这里寻找一个非常简单的解决方案 我只是想要一个可以一遍又一遍运行的 vba 脚本 以一遍又一遍地将相同的 Access 报告 随着时间的推移而变化 保存到同一个文件中 我需要每次都使用相同的名称 并且不想提示文件名已经存在 在我的研究中
  • 如何在QToolButton中放置透明背景的png图像

    我想在 QToolButton 中放置一个 png 图像作为背景 但我无法获得按钮中的透明部分 透明部分在我的 QToolButton 中显示为白色 有人能建议如何去除透明的白色部分吗 我猜你的 png 文件有问题 下面的代码 QToolB
  • 无法将频道保存到 PFInstallation (iOS)

    我正在尝试从 PFInstallation 添加 删除通道 但我不断收到相同的错误消息 Terminating app due to uncaught exception NSInternalInconsistencyException r
  • 为什么这个属性没有为函数类定义,但为同一函数类的实例定义? [复制]

    这个问题在这里已经有答案了 我正在查看以下示例MDN https developer mozilla org en US docs Web JavaScript Inheritance and the prototype chain fun
  • FancyBox2 - 标题位于顶部和底部?

    发现了几个类似的问题 但没有这个具体问题的答案 有没有办法在 FancyBox2 模式 弹出窗口的顶部和底部添加标题 我知道如何将标题放置在顶部或底部 但需要在顶部放置标题 在底部放置说明文字 提前感谢大家 您可以修改默认的 fancybo