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

Question

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?

Solution

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

Comments

[Redtopia]

I'm unable to try this at the moment... I'll get back to this thread when I figure things out. My problem is that I have a single popup that I want to use for multiple pages, and sometimes, depending on the URL, the same page loads twice, giving me two (or more) of the same dialog. I need to figure out a way to deal with this before I can try your solution.

[Ian Devlin]

Before opening the dialog, couldn't you check first to see if it's already visible, and if so, don't bother opening it?

[Redtopia]

That's not the issue... In the template for my CMS, I'm inserting the popup into the page. But because jquery mobile will sometimes cache pages in the DOM, there are times when my popup (with the same ID) exists multiple times in the DOM. I need to figure out a way to include a popup into each page with a unique id, and then the javascript will know which ID to use.

[Redtopia]

I finally got it all working. I had to inject a popup into every page that uses one... a little complicated, but it works nicely. I think I'm finally getting the hang of how jquery mobile works. For my template-driven site, I now avoid using DOM IDs because you end up with duplicates when they're part of your template. This messed me up quite a bit!

[Ian Devlin]

Glad to hear you got it working. That's my main issue with jQuery Mobile, me not understanding how everything works nor the best practices as in what type of stuff should I do in pagecreate, and what about pagebeforeshow and pageshow? Some guidelines would help!

[Kulbhushan Chaskar]

It is correct answer but i would like to add some more info. this solution worked for me. In my case i am creating dynamic pop up so this solution worked for me when i used myPopup.popup({ history: false }); after creating pop up and before opening it.

[Rémi Santos]

Works for me! Actually I added data-history="false" in the HTML --> <div data-role="popup" data-history="false" id="myPopup"></div>