我在使用fancybox插件时遇到问题

时间:2018-10-24 05:13:59

标签: javascript html css

我在这里http://fancyapps.com/fancybox/3/docs/

遵循指南

请向下滚动到“内联”,并阅读有关使框可滚动的信息部分,然后在此处尝试Codepen示例。在该示例中,有一个打开的演示按钮。如果单击它,则会打开一个弹出框,并且该框内有一个切换内容按钮。如果单击该按钮,则文本将显示并且可以滚动。

我需要删除切换内容按钮并直接显示可滚动文本。在文本的底部,我需要添加一些链接。

https://codepen.io/shadi-shtaklef/pen/oaayMQ是我的codepen示例。它与原始示例完全相同。我只是删除了切换内容按钮,然后添加了

Email: <a href="mailto:info@mdscomputers.ae">info@mdscomputers.ae</a><br>
Website: <a href="http://www.mdscomputers.ae" target="_blank">www.mdscomputers.ae</a>

在文本底部,问题是当我单击打开的演示按钮时,可滚动文本会自动向下滚动到底部的那两个链接。如何禁用它?

您可以在原始Codepen示例中进行相同的编辑,并且会发生相同的事情。

3 个答案:

答案 0 :(得分:1)

将此tabindex:0设置为模态的简单解决方案,如下所示:

<div id="modal" tabindex="0">

codepen

答案 1 :(得分:0)

这有点棘手,但是可以用; https://codepen.io/mcourto/pen/yRRqEq

我使用了jquery(因为您已经在使用它)$( "#button" ).click();单击按钮并使用CSS隐藏它 然后,我将文本区域的标签索引设置为1,以便默认情况下滚动到顶部。

答案 2 :(得分:0)

根据他们的文档,打开模式后,它将自动聚焦于第一个可聚焦元素。并且在您的模式内容中

<a href="mailto:info@mdscomputers.ae">info@mdscomputers.ae</a>

是第一个可聚焦元素。这就是模态自动向下滚动的原因。

如果要更改此默认行为,则可以使用数据属性

data-auto-focus="false"

打开演示锚点中。

请参见fancybox v3.5 - Scrollable content上Niraj Kaushal(@nirajkaushal)的钢笔CodePen