creating 2 popup's programatically(calling 2nd popup from 1st one) in jquery mobile

Question

I need to create 2 popup's programmatically and each popup should contain one INPUT box and one OK button and one CANCEL button.

Upon clicking on the first popup OK button i have to bringup the second popup.

I am new to jquery mobile, i looked into many docs but i didnt get proper way to do it.

i tried to do it something like this. but didn't worked.

var $popUp = $("<div/>").popup({
        dismissible : false,
        theme : "a",
        overlyaTheme : "a",
        transition : "pop"
    }).bind("popupafterclose", function() {
                    //remove the popup when closing
        $(this).remove();
    });

How can I do it in my js file?..

Thanks:).

Answer 1

2 Popus can not be active at the same time.

There's a workaround, and here's my old example: http://jsfiddle.net/Gajotres/8Arrt/

$(document).on('pagebeforeshow','#index',function(e,data){    
    $('#test-button').on('click', function(e) {
        $('#MyFirstPopup').popup('open', {x : 100, y : 500, positionTo : 'origin'});
    });    

     $('#popup-button').on('click', function(e) {
         setTimeout(function(){$('#MySecondPopup').popup('open', {x : 100, y : 100, positionTo : 'origin'});},100)
         $('#MyFirstPopup').popup('close');
    });
});

Basically if you want to open second popup you must close the first one. That's why we need setTimeout to opet second popup after the first one has been closed.