Question

我正在尝试打开一个精美的盒子，一切都已到位，除了一个花哨的盒子没有第二次打开的问题。

第一次它被打开得非常好，我试着打开第二次它没有打开它，这是我的代码

jQuery(document).ready(function() {

jQuery("#destination_Weather").fancybox({
    'titlePosition'     : 'inside',
    'autoScale'          :true,
    'autoDimensions'    : true,  
    'width'             : 600,
    'height'            : 'auto',
    'transitionIn'      : 'none',
    'transitionOut'     : 'none'
   });
});
<div style="display: none">
    <div id="destinationWeather">
        <?php  if(!empty($lat_long_cordinates))  {
             echo displayDestinationWeather('',$lat_long_cordinates);
          } ?>
     </div>
   // one more div used for another fancybox content
</div>

<a href="#destinationWeather" id="destination_Weather">link </a>

我不确定为什么会发生这种情况，但是当我第二次点击链接时，它正在重新整理整个页面。不确定这是一个花哨框实现的问题，还是PHP的一些错误实现。

我注意到还有一件事，当我第一次关闭弹出窗口时，destinationWeather div丢失了所有数据，我只能在那里看到这些信息

<div class="fancybox-inline-tmp" style="display: none;"></div>

不确定为什么会这样？

重要：请注意fancybox v1.3.4不适用于jQuery v1.9 +。

Answer 1

由于您使用的是fancybox v1.3.4，因此必须执行此操作

1）。您的目标内嵌div应该包含在额外的div中，例如：

<div style="display: none">
    <div id="destinationWeather">
        <?php  if(!empty($lat_long_cordinates))  {
            echo displayDestinationWeather('',$lat_long_cordinates);
        } ?>
    </div>
</div>

请注意，目标div（#destinationWeather）不应包含任何display:none属性，而应包含父包装div（在上面的代码）

2）。 v1.3.4中存在关于inline内容的已知错误（记录为here），因此您必须在代码中应用变通方法：

jQuery(document).ready(function () {
    jQuery("#destination_Weather").fancybox({
        'titlePosition': 'inside',
        'autoScale': true,
        'autoDimensions': true,
        'width': 600,
        'height': 'auto',
        'transitionIn': 'none',
        'transitionOut': 'none',
        // fix inline bug
        'onCleanup': function () {
            var myContent = this.href;
            $(myContent).unwrap();
        }
    });
});

参见 JSFIDDLE

重要：还要注意fancybox v1.3.4不能与jQuery v1.9 +一起使用。请参阅this post以获取进一步的参考和解决方法。

Answer 2

如果这对这个问题的未来观点有任何用处，我花了很多时间试图让它在Wordpress中运行，其中一个插件正在加载v1.3.4 Fancybox。

在没有得到很多运气方面的运气之后（至少还没有给我设置插件的配置），我发现v1.3.6 Fancybox不包含上面描述的错误并且是最快的，也是最快的对我来说很方便。

Answer 3

有一种方法可以解决与fancybox-1.3.4相关的问题。使用fancybox＆＃39; onClosed＆＃39;事件，将原始div内容HTML重新分配回同一个fancybox div元素。因此，当关闭fancybox时，我们会将div（html）的原始内容重新分配给自己。

$(document).ready(function () {

        fancyMain = $("#fancyMain").html(); //here fancyMain is the div element which is set with display:none

        $("#fancyLinkId").fancybox({
            'hideOnContentClick': false,
            'autoScale': false,
            'autoSize': true,

            'onClosed': function () {
                $('#fancyMain').html(fancyMain);

        }
});

FancyMain是主要的div，其样式为display：none 这是一个内在的div，实际的花式框内容与id fancydata相关 //花式框中的内容就在这里 //结束内部div //结束maindiv

//然后锚链接与内部div相关联fancyLinkId href #fancydata

这有效

Answer 4

动态内联内容加载

      function loadAnswer(id) 
        {     
                jQuery.fancybox({       
                 'content' : jQuery("#outerFAQ"+id).html(),         
                  /*For Auto height and width*/
                 'onComplete' : function(){
                  jQuery('#fancybox-wrap').css({height:'auto',width:'auto'});
                        /*jQuery('.fancybox-wrap').css('left','50%');*/
                          jQuery.fancybox.resize();
                         jQuery.fancybox.center();  
                                }
            }); 
        }

    /*Dynamically Set the id and passing it to function*/  
     <a class="fancybox"  href="#" onClick="loadAnswer(<?php echo $data->getId()/*Dynamic id*/ ?>);"> Demo </a>

        <div id="outerFAQ<?php echo $data->getId(); ?>"  style="display:none;"> 
        <div id="ans<?php echo $data->getId();?>">
                   demo        
             </div>
 <div>

单线内容加载

   jQuery( "#demo" ).click(function() {
      jQuery.fancybox({
                'content' : jQuery("#demoContent").html(),
                 onComplete: function () {

                                /*Static height width*/  
                               jQuery("#fancybox-content").css({
                                        height:'500px',
                                        overflow:'scroll',
                                    });
                                    jQuery("#fancybox-wrap").css("top","10");
                                    jQuery(".fancybox-wrap").css("position", "absolute");
                                }
        });

    <a  id="demo"  href="#">Click me</a>

    <div style="display: none">
                <div id="demoContent">
                    demo
                </div>
    </div>

花式盒子没有第二次开放

4 个答案: