jquery mobile popup close button - how to close without going back?

5
votes

I'm using the new popup dialog in jquery mobile 1.2.0 to display a bunch of youtube videos. Here are the popup examples I'm using:

http://jquerymobile.com/demos/1.2.0/docs/pages/popup/popup-iframes.html

Notice the maps example... it's a fancybox style with a close button. I've made my video popup do the same thing. The difference is the additional close link, added to the popup like so:

<a href="##" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>

Here's the problem: After opening one video and then closing it, then opening the next video and closing it, the first video shows up again. I think it's because the previous video is where "back" is in the history, and the close box is implemented as "back".

Is there a built in way to implement the close box as a true "close", or would I need to do it via javascript?

1
jqueryjquery-mobileyoutubepopup
Seems like closing a popup (even when not using the close button - ie, tapping outside the popup) is done by going back. I'm not entirely sure about this... all I know is how it behaves at this point. When my last page view had a previously opened popup, that popup gets opened again. My implementation might be slightly different than normal - I'm using the same popup to display all vidoes... I simply change the src attribute for the iframe before opening the popup using: ('#popupid').popup('open'); – Redtopia
Here's essentially what I'm doing: jsfiddle.net/zFete/2 I am using the same popup to display multiple videos. I tried to post a jsfiddle yesterday, but there's issues with this running this on FF and Chrome having to do with Flash. As you'll see in my mods to your jsfiddle, you have to click the button 2x for the popup to show, and then there's some other issues as well, which are shown in the console. The dev site that's actually using this is at: ehealthmobile.redtopia.com under the "team" icon from the home page. – Redtopia
@Phil... just wondering if you had any ideas? I think it might have something to do with the hash, which is added to the URL when opening the popup. I wonder if there's a way to open the dialog without adding the hash... and then closing it. I would hate to have to create separate popups for each video because the list of videos can vary. I suppose I could dynamically create a different popup for each video. – Redtopia
I think the issue is you're using the same popup but changing the url to point to another video. Great Idea but I'm not sure that's how jQM team thought about doing. I would make an issue to see if you could get anywhere with jQM but also maybe create two separate popups just to test out my theory – Phill Pafford
I'm running into a similar issue as I'm using a popup to display an error message, which then closes after 3 seconds. Sometimes the close causes the main page to go back to the previous one. The popup functionality here seem badly implemented to me as this behaviour simply shouldn't happen. – Ian Devlin

1 Answers

16
votes

@Redtopia, thanks for the response. I fixed my issue by setting the myPopup.popup({ history: false }); option on the popup. Then everything works fine.