Fancybox关闭按钮单击时消失

本文介绍了Fancybox关闭按钮单击时消失的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我目前使用fancybox版本2.1.5，我遇到的问题是当我点击关闭按钮x在iframe，关闭按钮x消失，而不是关闭iframe。有没有人遇到这个错误，而使用fancybox？请访问此页面并点击详细信息和关闭按钮x来体验错误。 www.jerrellkbryant/jbcom/portfolio

< div>< a class =various small_button shadow nonedata-fancybox-type =iframehref =details / clear.html> ;查看详情< / a>< a class =small_button shadow =nofollowhref =www.jerrellkbryant/redventures/target =_ blank>访问网站< / a>< / div> jQuery（document）.ready（function（）{ $（various）。fancybox（{ type：'iframe'， scrolling：'no'， maxWidth：800， maxHeight：400， fitToView：true， width：'70％'， height： 70％'， autoSize：false， closeClick：true， openEffect：'none'， closeEffect：'none'，}）;

解决方案

一般来说，设置一般的CSS规则不是一个好主意。 / p>

在您的样式 css文件你有这些规则（从第286行）

a {text-decoration：none; color：＃393631} a：visited {/ * opacity：0.8; * / / *有点基本，但它是一个裸的... * /} a：hover {text-decoration：none; / * background：＃c1f4e3; * / color：＃393631} a：active，a：focus {position：relative; top：1px; outline：none}

影响fancybox关闭按钮的位置（这是一个锚点）

使用一些特殊性，目标受到影响像：

#content a {text-decoration：none; color：＃393631} #content a：visited {/ * opacity：0.8; * / / *有点基本，但它是一个裸的minumum ... * /} #content a：hover {text-decoration：none; / * background：＃c1f4e3; * / color：＃393631} #content a：active， #content a：focus {position：relative; top：1px; outline：none}

I am currently using fancybox version 2.1.5, the problem i am encountering is when I click on the close button "x" on the iframe, the close button "x" disappears rather than closing the iframe. Has anyone else encountered this error while using fancybox? Please visit this page and click "details" and the close button "x" to experience the error. www.jerrellkbryant/jbcom/portfolio

<div><a class="various small_button shadow none" data-fancybox-type="iframe" href="details/clear.html">View Details</a><a class="small_button shadow" rel="nofollow" href="www.jerrellkbryant/redventures/" target="_blank"> Visit Website</a></div> jQuery(document).ready(function(){ $(".various").fancybox({ type :'iframe', scrolling : 'no', maxWidth : 800, maxHeight : 400, fitToView : true, width : '70%', height : '70%', autoSize : false, closeClick : true, openEffect : 'none', closeEffect : 'none', });

解决方案

Generally speaking it's not a good idea to set general CSS rules.

In your style css file you have these rules (from line 286)

a{text-decoration:none; color:#393631} a:visited{/*opacity:0.8; */ /* A bit basic,but it's a bare minumum... */} a:hover{text-decoration:none; /*background:#c1f4e3;*/ color:#393631} a:active, a:focus{position:relative; top:1px; outline:none}

that are affecting the position of fancybox close button (which is an anchor)

Use some specificity instead so only those you target are affected like :

#content a{text-decoration:none; color:#393631} #content a:visited{/*opacity:0.8; */ /* A bit basic,but it's a bare minumum... */} #content a:hover{text-decoration:none; /*background:#c1f4e3;*/ color:#393631} #content a:active, #content a:focus{position:relative; top:1px; outline:none}