花式盒子第二次打不开

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 'onClosed' 事件，将原始 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 这是实际花式框内容与 id fancydata 一起的内部 div //花式框中的内容放在这里 //结束内部div //结束主目录

//然后锚链接关联到内部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>