Open 2 windows and close one at a time

Question

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

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

I made an example in jsfiddle with both windows and it closes both when I close the second... http://jsfiddle.net/g3R75/1/

Answer 1

On July 30, 2013, the user @JFK opened a Bug Report to the scenario you’re dealing with:

Multiple inline content and lock Issue when Opening fancybox from Within fancybox

Essentially, if you have multiple contents inline and try to open a Fancybox from the contents of an already opened one, you get an error:

TypeError: this.overlay is null

And the operation is stopped.

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

---

Solution

As a solution we can only work with an instance of Fancybox, which the user will open first, 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 click to open the first popup, Fancybox performs normally;
• user click to open the second popup, what we do is replace the contents of the first popup by the content of the second;
• The user closes the second popup, fire a click in the Fancybox call, thus bringing back the original content.
• The user closes the first popup, Fancybox closes normally.

Essentially we’re always dealing with the Fancybox call, but in a way where we don’t have the event of it attached to the call of the second modal inline. This way we get around the Fancybox problem and solve your.

---

Note:

What the @Wakim user mentioned in the comment is correct, Fancybox makes use of a single DOM structure to switch between different contents and/or calls, which is why the Bug I highlighted exists.

When you say in your question that he closes them both, what happens is that he closes the only one that exists instantiated. In reality there is never more than one instance of Fancybox.

Answer 2

I found another way to do this also in gringo stackoverflow... https://stackoverflow.com/questions/24463658/close-2-modal-and-open-1-again/24465132#24465132

Jsfiddle: http://jsfiddle.net/RR9Z4/

Using the callback afterClose,

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