My site is built in HTML5, CSS3 and Jquery-moblie..

I use pop-ups of Jquery-mobile.

On a popup window I have a button that when pressed I want the current pop-up window will close and another will open.

I tried it this way:

popup windows:

    <div id="MyFirstPopup" data-role="popup" data-theme="a" data-overlay-theme="a" class="ui-content">
        <a  data-role="button" data-transition="none" data-theme="b"
            onclick="ShowSecond();" data-icon="forward" data-iconpos="left" >
        </a>
    </div>

    <div id="MySecondPopup" data-role="popup" data-theme="a" data-overlay-theme="a" class="ui-content">
     ...
    </div>

JS:

function ShowSecond()
{
   $('#MyFirstPopup').popup('close');
   $('#MySecondPopup').popup('open');
}

It did not work.

Does anyone have a solution?

My site is built in HTML5, CSS3 and Jquery-moblie..

I use pop-ups of Jquery-mobile.

On a popup window I have a button that when pressed I want the current pop-up window will close and another will open.

I tried it this way:

popup windows:

    <div id="MyFirstPopup" data-role="popup" data-theme="a" data-overlay-theme="a" class="ui-content">
        <a  data-role="button" data-transition="none" data-theme="b"
            onclick="ShowSecond();" data-icon="forward" data-iconpos="left" >
        </a>
    </div>

    <div id="MySecondPopup" data-role="popup" data-theme="a" data-overlay-theme="a" class="ui-content">
     ...
    </div>

JS:

function ShowSecond()
{
   $('#MyFirstPopup').popup('close');
   $('#MySecondPopup').popup('open');
}

It did not work.

Does anyone have a solution?

• javascript
• jquery
• css
• jquery-mobile
• popup

• 2 function ShowSecond() { $('#MyFirstPopup').popup('close'); $('#MySecondPopup').popup('open'); } use # before id. – Turcia Commented Dec 27, 2012 at 11:51
• On my site I used in #, simply by editing the question has been deleted .. I edited the question again – Hodaya Shalom Commented Dec 27, 2012 at 11:54
• are you getting any error? – Milind Anantwar Commented Dec 27, 2012 at 12:22

2 Answers 2

First don't use onclick="ShowSecond();" directly on an a tag.

I have created you a working example: http://jsfiddle/Gajotres/8Arrt/

Add click event like this:

 $('#popup-button').live('click', function(e) {
     setTimeout(function(){$('#MySecondPopup').popup('open');},500)
     $('#MyFirstPopup').popup('close');
});

Or use .on( if you are using new jQuery library. You can not open new popup unless old one is close but you also can't open now popup in event that closes last one, so setTimeout function is needed. Set whatever timeout you need/want.

Try this:

<div id="MyFirstPopup" data-role="popup" data-theme="a" data-overlay-theme="a" class="ui-content">
    <a id="btOpenSecPopup" data-role="button" data-transition="none" data-theme="b"
        onclick="ShowSecond();" data-icon="forward" data-iconpos="left" >
    </a>
</div>

<div id="MySecondPopup" data-role="popup" data-theme="a" data-overlay-theme="a" class="ui-content">
 ...
</div>

Your js file

$('#btOpenSecPopup').live('click', function(e) {
    $('#MyFirstPopup').popup('close');
    $('#MySecondPopup').popup('open');
}