Fancybox关闭按钮单击时消失 [英] Fancybox Close button disappearing when clicked

问题描述

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

 < div>< a class =various small_button shadow nonedata-fancybox-type =iframehref =details / clear.html> ;查看详情< / a>< a class =small_button shadow =nofollowhref =http://www.jerrellkbryant.com/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. http://www.jerrellkbryant.com/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="http://www.jerrellkbryant.com/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}

这篇关于Fancybox关闭按钮单击时消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！