Open 2 windows and close one at a time

2

In fancybox I open two plugin windows and need to close one at a time ...

Example: when opening the first window only closes the first and when the second opens only the second, the first one remains open when the second closes ...

I made an example in jsfiddle with the two windows and it closes the two when I close the second ... link

    
asked by anonymous 28.06.2014 / 06:00

2 answers

4

On July 30, 2013, the @JFK user opened a Bug Report for the scenario you are dealing with:

Multiple inline content and lock issue when opening fancybox from within fancybox

Essentially, if you have multiple inline content and try to open a FancyBox from the contents of an already open one, you receive an error:

TypeError: this.overlay is null

And the operation is interrupted.

So far there is no resolution for this problem reported by FancyBox.

Solution

As a workaround we can work with only one instance of FancyBox, which the user will open first by changing the content of the same by browsing the user:

View demo in JSFiddle

HTML

<a id="fancy1" href="#modal1">Abrir FancyBox 01</a>

<div style="display:none">
    <div id="modal1">
        <a id="fancy2" href="#">Abrir FancyBox 02</a>
    </div>
    <div id="modal2">
        Teste2
    </div>
</div>

jQuery

// Instanciar a primeira popup
$("#fancy1").fancybox({
    closeBtn: false,
    hideOnContentClick: true,
    padding: 0,
    fitToView: false,
    autoCenter: true,
    type: 'inline',
    helpers: {
      overlay: {
        css: {
          'background': 'rgba(0, 0, 0, 0.55)'
        }
      }
    }
});

/* Anexar um evento de clique no que seria a chamada da segunda popup
 * para que possamos trocar o HTML da primeira pelo HTML da segunda
 */
$('body').on("click", '#fancy2', function(){
    $.fancybox.open({
        closeBtn: false,
        href: "#modal2",
        type: 'inline',
        afterClose: function() {
            /* Chamar a primeira popup quando o
             * utilizador quer sair da segunda
             */
            $("#fancy1").trigger("click");
        }
    });
});

Explanation

  • User clicks to open the first popup , FancyBox executes normally;
  • user clicks to open the second popup , what we do is replace the contents of the first popup with the contents of the second
  • The user closes the second popup , we trigger a click on the FancyBox call, thus bringing back the original content.
  • The user closes the first popup , FancyBox normally closes.

Essentially we are always dealing with the FancyBox call, but in a way we do not have the same event attached to the call of the second modal inline . This way we have overcome the existing problem in FancyBox and we have solved your problem.

Note:

What the @Wakim user mentioned in the comment is correct, FancyBox makes use of a single DOM structure to switch between different content and / or calls, which is why the bug I pointed out exists.

When you say in your question that it closes the two, what happens is that it closes the only one that exists instantiated. In reality, there is never more than one FancyBox instance.

    
28.06.2014 / 19:18
0

I discovered another way to do this also in the gringo stackoverflow ... link

JSFiddle: link

Using the afterClose callback,

afterClose: function () {
    if (this.element.attr("id") == "fancybox-button3") {
        $("#button2").click();
    }
}
    
28.06.2014 / 22:46