Unexpected behaviour calling modal from a modal

[johnoatwork]

Hi,

I need to call modals from within modals and I've come across an issue I can't solve. Basically, I call modal 2 from modal 1, then call modal 3 from modal 2. Everything works as expected. However after I have closed all the models, the next time I call modal 1, modal 2 is launched again. The html and js are below. It comes down to the modal_2.open() statement in function modal_3() firing on close of any modal, not just modal_3. Am I missing something?

Cheers John

<div class="remodal" data-remodal-id="modal_1">
    <h3>Modal 1</h3>
    <br/>
    <p>Click through each link to open the next modal. When you get to modal 3 click the close button on each modal until all are closed.</p>
    <p>Then open modal 1 again. Clicking the close button on modal 1 will reopen modal 2!</p>   
    <br/>
    <p class="openModal_2"> Click to open Modal 2</p>
    <br/><br>
  <button data-remodal-action="cancel" class="remodal-cancel">Close</button>
</div>

<div data-remodal-id="modal_2">
    <h3>Modal 2</h3>
    <br/>
    <a href="javascript:modal_3()">Click to open Modal 3</a>
    <br/><br/>
    <button data-remodal-action="cancel" class="remodal-cancel">Close</button>
</div>

<div data-remodal-id="modal_3">
    <h3>Modal 3</h3>
    <br/>
    <p>This is modal 3</p>
    <br/><br/>
    <button data-remodal-action="cancel" class="remodal-cancel">Close</button>
</div>

And this is the js:

jQuery(document).on("click", ".openModal_2", function () {

var modal_1 = jQuery('[data-remodal-id=modal_1]').remodal();
modal_1.close();

var modal_2 = jQuery('[data-remodal-id=modal_2]').remodal();
modal_2.open();                 

});

function modal_3() { var modal_2 = jQuery('[data-remodal-id=modal_2]').remodal(); modal_2.close();

var modal_3 = jQuery('[data-remodal-id=modal_3]').remodal();
modal_3.open();

jQuery(document).on('closing', modal_3, function (e) {      
    modal_2.open();     
}); 

}

[vodkabears]

169