与fancyBox显示后，可见的内联div消失 [英] Visible inline div disappears after being displayed with fancyBox

问题描述

我在这里发布问题和解决方案，以帮助任何遇到过与我相同的问题的人.

I am posting a problem and solution here to help anyone who has experienced the same problem as me.

我的页面上有一个<div>，我想允许用户通过单击图标来缩放". <div>未隐藏.

I have a <div> on my page which I wanted to allow the user to 'zoom' to by clicking on an icon. The <div> is not hidden.

我使用fancyBox( fancyBox主页)将<div>显示为一种模式窗口.我在其他灯箱类型插件上使用fancyBox的原因是，它不复制<div>的内容，而是将其移动，因此所有表单元素等都可以继续工作. 问题是关闭fancyBox窗口后，<div>隐藏在主页上.

I used fancyBox (fancyBox home page) to display the <div> as a sort of modal window. The reason I used fancyBox over other lightbox type plugins is that it does not duplicate the contents of the <div>, but moves it, so all form elements, etc. continue to work. The problem is that after closing the fancyBox window, the <div> is hidden on the main page.

解决方案:

我使用了fancyBox 2.1.2.

I used fancyBox 2.1.2.

我使用了JFKDIAZ在github( https://github.com/fancyapps/fancyBox/issues/103 )，以确保在关闭fancyBox窗口后div返回到其父级.

I used a solution posted by JFKDIAZ on github (https://github.com/fancyapps/fancyBox/issues/103) to ensure that the div was returned to its parent after closing the fancyBox window.

然后我使用jquery show功能再次显示div内联.

I then used the jquery show functionality to display the div inline again.

我的初始化花哨框的代码如下.注意beforeLoad和afterClose函数来标识父级<div>并将<div>返回到其父级(这要感谢JFKDIAZ).请注意添加$(inlineTarget).show();以再次显示<div>，以便它不会消失.其余的是fancyBox的标准初始化.

My code to initialise the fancy box is below. Note the beforeLoad and afterClose functions to identify the parent <div> and return the <div> back to its parent (thanks to JFKDIAZ for this). Note the addition of $(inlineTarget).show(); to display the <div> again so that it does not disappear. The remainder is the standard initialisation for fancyBox.

        $(document).ready(function() {
        $(".various").fancybox({
            beforeLoad: function() {
                inlineTarget = this.href;
                parentNodename = $(inlineTarget).parent().get(0).tagName.toLowerCase();
                $(inlineTarget).parent(parentNodename).addClass("returnTo");
            },
            afterClose: function() {
                $(inlineTarget).appendTo(".returnTo");
                $(".returnTo").removeClass("returnTo");
                $(inlineTarget).show();
            },
            maxWidth: 880,
            maxHeight: 600,
            fitToView: false,
            width: '70%',
            height: '70%',
            autoSize: false,
            closeClick: false,
            openEffect: 'none',
            closeEffect: 'none'
        });
    });

我的<div>代码和在fancyBox中显示<div>的链接如下.请注意，父<div>必须具有id，以便代码可以识别它.类various是用于标识必须将fancyBox应用于哪个<a>元素的标签.

My code for the <div> and the link to display the <div> in the fancyBox is below. Note that the parent <div> must have an id so that the code can recognise it. The class various is the tag I use to identify which <a> element I must apply the fancyBox to.

    <a href="#application_form" class="various">Zoom</a>
    <div id="application_parent">
        <div id="application_form">
            Contents to display in fancyBox and return back here when complete.
        </div>
    </div>

这对我很好.所有表单元素都移至fancyBox并返回到页面上的原始位置.

This worked for me very well. All form elements were moved to the fancyBox and back to their original position on the page.

更新(从注释移至小提琴的链接)-有关DEMO的信息，请参见: http ://jsfiddle.net/z8e9q/3/

UPDATE (moved link to fiddle from comments) - For a DEMO see :http://jsfiddle.net/z8e9q/3/

我希望这对遇到相同问题的人有所帮助.

I hope this helps someone who has the same problem.

推荐答案

我为fancybox v2.0.6及以下版本编写了该解决方案(我也是JFKDIAZ；).新版本v2.1.x +已解决了该问题(已将临时占位符设置为将内容返回到其原始位置)，但是v2.1.x +的 NEW 问题(迄今为止的v2.1.2)是确实已正确返回了内容，但隐藏了.

I wrote that solution for fancybox v2.0.6 and below (I am JFKDIAZ too ;). That issue has been fixed with the new release v2.1.x + (a temporary placeholder has been set to return the content to its original place), however the NEW issue with v2.1.x + (v2.1.2 to date) is that the content is indeed properly returned but hidden.

新的解决方法(针对2.1.x +版本)只是为了使其像afterClose一样可见

The new workaround (for version 2.1.x +) would be just to make it visible afterClose like

var tarGet; // initialize var at top of script

回调

beforeShow: function(){
 tarGet= this.href;
},
afterClose: function(){
 $(tarGet).show();
}

请参见分叉的小提琴

编辑(2014年3月27日):为避免@ Henrik-Erlandsson在他的答案，您只需执行以下操作即可:

EDIT (March 27, 2014) : To avoid global variables as pointed out by @Henrik-Erlandsson in his answer, you could simply do :

afterClose: function(){
  $(this.href).show();
}

请参阅分叉的 JSFIDDLE

See forked JSFIDDLE

这篇关于与fancyBox显示后，可见的内联div消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！