Abrir un popup inmediatamente despues de cerrar otro

Chaining Popups - jQuery Mobile 1.3

by limd

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<div data-role="page">
    <div data-role="content"> <a href="#" data-role="button" id="show">Open popup</a>

    </div>
    <!-- popups -->
    <div data-role="popup" id="pop1" data-history="false">
        <div data-role="header">
             <h6>Popup 1</h6> 
        </div>
        <div data-role="content">
            <p>Lorem ipsum dolor sit amet...</p> <a href="#" data-role="button" data-rel="back">Close</a>

        </div>
    </div>
    <div data-role="popup" id="pop2" data-history="false">
        <div data-role="header">
             <h6>Popup 2</h6> 
        </div>
        <div data-role="content">
            <p>Lorem ipsum dolor sit amet...</p> <a href="#" data-role="button" data-rel="back">Close</a>

        </div>
    </div>
    <div data-role="popup" id="pop3" data-history="false">
        <div data-role="header">
             <h6>Popup 3</h6> 
        </div>
        <div data-role="content">
            <p>Lorem ipsum dolor sit amet...</p> <a href="#" data-role="button" data-rel="back">Close</a>

        </div>
    </div>
</div>

CSS

.popup {
    height: 200px;
    width: 150px;
}
.popup h6 {
    font-size: 1.5em !important;
}

JavaScript

$(document).on("click", "#show", function () {
    $("#pop1").popup("open", {
        positionTo: "window",
        transition: "flip"
    }).on("popupafterclose", function () {
        $("#pop2").popup("open", {
            positionTo: "window",
            transition: "flip",
            reverse: true
        }).on("popupafterclose", function () {
            $("#pop3").popup("open", {
                positionTo: "window",
                transition: "flip",
                reverse: true
            });
        });
    });
});