fancybox3使用总结

标签： Jquery 分类： Javascript 创建时间：2019-03-19 08:44:57 更新时间：2025-01-17 10:39:23

在自己的博客中，用到了fancybox这个弹出层插件，fancybox支持图片、视频、iframe等。

一、使用方式：

1.https://juejin.im/post/5a30c475f265da430a509184#heading-27
2.https://salongweb.com/fancybox3.html

二、主要存在的问题

会有打开或关闭遮罩层的时候，页面会自动返回顶部，这让人看起来非常不爽。
fancybox2中的解决方式是:( 参考:https://www.acgist.com/article/120.html )

$('#selector').fancybox({
    helpers:{
        overlay:{
            locked:false
        }
    }
});

fanycybox3已经没有了这个helpers选项了。经过多方尝试，终于解决了这个问题，简直丧心病狂，都想放弃这个插件了。

1.首先是修改一个全局样式,用这个样式覆盖默认的。禁止打开的时候，出现返回顶部的bug。

1
2
3

.fancybox-active{
    height:inherit!important; 
}

2.其次是对应用弹出层的图片，添加如下代码

$('.fancybox').fancybox({
    backFocus:false //这里是关键，  （Put focus back to active element after closing）关闭自动将焦点设置到激活元素上。禁止关闭的时候，出现返回顶部的bug。
    ,hash: false //禁用hash模式，不让他改浏览器地址栏
    ,hideScrollbar:false  //不隐藏原先自带的滚动条
});

3.页面出现滚动条

默认的配置项中hideScrollbar: true，隐藏滚动条，当然，你可以设置hideScrollbar选项为false，就可以出现滚动条了。或者直接修改样式也可以达到显示和隐藏滚动条的目的。

1
2
3

.fancybox-active{
    overflow:hidden; 
}

往期推荐

文章目录

1. 一、使用方式：
2. 二、主要存在的问题

微信公众号

广告位

诚心邀请广大金主爸爸洽谈合作

每日一省

isNaN 和 Number.isNaN 函数的区别？

1.函数 isNaN 接收参数后，会尝试将这个参数转换为数值，任何不能被转换为数值的的值都会返回 true，因此非数字值传入也会返回 true ，会影响 NaN 的判断。

2.函数 Number.isNaN 会首先判断传入参数是否为数字，如果是数字再继续判断是否为 NaN ，不会进行数据类型的转换，这种方法对于 NaN 的判断更为准确。

每日二省

为什么0.1+0.2 ! == 0.3，如何让其相等?

一个直接的解决方法就是设置一个误差范围，通常称为“机器精度”。对JavaScript来说，这个值通常为2-52，在ES6中，提供了Number.EPSILON属性，而它的值就是2-52，只要判断0.1+0.2-0.3是否小于Number.EPSILON，如果小于，就可以判断为0.1+0.2 ===0.3。

每日三省

== 操作符的强制类型转换规则？

1.首先会判断两者类型是否**相同，**相同的话就比较两者的大小。

2.类型不相同的话，就会进行类型转换。

3.会先判断是否在对比 null 和 undefined，是的话就会返回 true。

4.判断两者类型是否为 string 和 number，是的话就会将字符串转换为 number。

5.判断其中一方是否为 boolean，是的话就会把 boolean 转为 number 再进行判断。

6.判断其中一方是否为 object 且另一方为 string、number 或者 symbol，是的话就会把 object 转为原始类型再进行判断。

每日英语

Happiness is time precipitation, smile is the lonely sad.

幸福是年华的沉淀，微笑是寂寞的悲伤。