jQuery Mobile Popup

[randalldev]

Hi guys, I'm trying to get popups working on my website and what I did was going to jQuery Mobile Custom Download and I chose only the Popup Option and downloaded the custom build and setup everything but the popups don't works. To test if I did the setup right and the popup link right, I change the script src from the custom to the complete jquery.mobile-1.4.2.js and the popup works but it mess up my website template. I just need the popup function only. Please let me know if is something I can modified on the script and I do it. Thanks Guys!!

[gabrielschulhof]

Have you tried calling $( "#my-popup" ).popup( "open" )

[randalldev]

Where I use that?

[gabrielschulhof]

I've created an example illustrating the use of the popup. It does not include back button support.

[gabrielschulhof]

Don't worry about all those scripts at the top of the example. They basically contain the same stuff as your custom build, but broken up into many scripts.

[randalldev]

I tried

and is not working for some reason. Also I have the problem that I will have more than one popup link on a single page and also in many pages. Than will require to use more than one id for each popup, so creating the above script will be useful for only one popup.

To explain better what I'm trying to do is, example: This is a paragraph saying something and I need a popup in "this text" to explain the text and the same for other words on many paragraph. The thing is that, If I use the complete jquery.mobile-1.4.2.js works but with custom don't but, the complete one mess my template. I'm a little new to javascript so I'm a little lost of what function is messing my template to be able to remove it from jquery.mobile-1.4.2.js.  Sorry the long explanation but I'm very grateful that you are trying to help me. Let me know what do you think! Thanks Again!! 

[gabrielschulhof]

You can use a single popup:

<div id="explanation-popup">
</div>

// When the user clicks on a paragraph
$( "p" ).click( function() {
  $( "#explanation-popup" ).html( "<p>This is the explanation</p>" ).popup( "open" );
});

[randalldev]

I'm so lost hahah! I know is not your fault :) Do you know if I can extract only all the functions to make the popups from the complete jquery.mobile-1.4.2.js? Or to remove functions that have to do with the layout and that way will not mess my template? Thanks Again!!

[gabrielschulhof]

You already have all the functions necessary for creating a popup in your custom build. If all you've selected is the popup then you should not have gotten any other code from jQuery Mobile. The example I gave you shows you how to

1. Wait for the DOM to finish loading (by wrapping your code in $( function() {/* code goes here */});)
2. Create the popup ($( "#my-popup" ).popup())
3. Open the popup when the user clicks the link

I'm afraid I really can't think of anything else with which to help you. You may want to go on IRC and join channel #jquery on irc.freenode.net. That's where people help each other with all things related to jQuery, jQuery UI, and jQuery Mobile.