问题
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?
回答1:
First don't use onclick="ShowSecond();" directly on an a tag.
I have created you a working example: http://jsfiddle.net/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.
回答2:
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');
}
来源:https://stackoverflow.com/questions/14054205/opening-a-popup-window-from-another-popup