jQuery popup not closing

Discussion Forums > Plugins, Customizing, Source Code

Replies: 10 Views: 1086

sxywebgirl Aspiring developer Posts: 158 Reg: Apr 12, 2013 Altadena, CA 7,530	confirm \| cancel 05/02/13 10:57 AM (12 years ago) jQuery popup not closing I'm trying to do a jQuery button with a popup window that will show business hours. The code I'm using works except the popup is supposed to close when the screen is touched outside of the popup (says jquerymobile.com). The popup will only close if I do a refresh of the app. <div data-role="page" id="popup-hours"> <div data-role="content"> <div><img src="images/contactUs-popup.png" width="301" height="298" alt="Contact Info"></div> <div data-role="controlgroup" data-type="horizontal"> <a href="tel://7148218080" data-role="button" ><img src="images/phone.png" width="35" height="30" alt="Call Us"><br> Call Us</a> <a href="#popup-hours" data-role="button" data-rel="popup" ><img src="images/www.png" width="35" height="30" alt="Hours"><br> Hours</a><div data-role="popup" id="popup-hours"> <p><strong><u>Lunch Hours:</u> </strong><br> <strong>Monday thru Friday</strong><br> 11:00am to 2:30pm <br> <br> <strong><u>Dinner Hours:</u></strong><br> <strong>Monday thru Thursday</strong><br> 4:30pm to 9:00pm <br> <strong>Friday</strong> - 4:30pm to 10:00pm <br> <strong>Saturday</strong> - 4:00pm to 10:00pm <br> <strong>Sunday</strong> - 4:00pm to 9:00pm <p> </div> <a href="mailto:[email protected]" data-role="button"><img src="images/email.png" width="35" height="30" alt="Email"><br> Email</a></div> </div> </div> Can someone tell me what I'm missing in my code for this to work properly?? Thanks! T. Title Comments I'm trying to do a jQuery button with a popup window that will show business hours. The code I'm using works except the popup is supposed to close when the screen is touched outside of the popup (says jquerymobile.com). The popup will only close if I do a refresh of the app. <div data-role="page" id="popup-hours"> <div data-role="content"> <div><img src="images/contactUs-popup.png" width="301" height="298" alt="Contact Info"></div> <div data-role="controlgroup" data-type="horizontal"> <a href="tel://7148218080" data-role="button" ><img src="images/phone.png" width="35" height="30" alt="Call Us"><br> Call Us</a> <a href="#popup-hours" data-role="button" data-rel="popup" ><img src="images/www.png" width="35" height="30" alt="Hours"><br> Hours</a><div data-role="popup" id="popup-hours"> <p><strong><u>Lunch Hours:</u> </strong><br> <strong>Monday thru Friday</strong><br> 11:00am to 2:30pm <br> <br> <strong><u>Dinner Hours:</u></strong><br> <strong>Monday thru Thursday</strong><br> 4:30pm to 9:00pm <br> <strong>Friday</strong> - 4:30pm to 10:00pm <br> <strong>Saturday</strong> - 4:00pm to 10:00pm <br> <strong>Sunday</strong> - 4:00pm to 9:00pm <p> </div> <a href="mailto:dominicscypress@yahoo.com" data-role="button"><img src="images/email.png" width="35" height="30" alt="Email"><br> Email</a></div> </div> </div> Can someone tell me what I'm missing in my code for this to work properly?? Thanks! T.

AlanMac Aspiring developer Posts: 2612 Reg: Mar 05, 2012 Esher, UK 37,120	05/02/13 11:31 AM (12 years ago) Hi @sxywebgirl I thought I'd have a peek. There is no jquery in the code you posted, its all html. Also, I started to think that apps and mobile web don't do popups in the way desktop browsers do anyway. So I though I'd loaded the code into a browser to visualise what you want to do, but I'm still not sure. Would creating this as an html page and calling it as a link from another page work, with a back button included on here to navigte you back do what you want? Alan Comments Hi @sxywebgirl I thought I'd have a peek. There is no jquery in the code you posted, its all html. Also, I started to think that apps and mobile web don't do popups in the way desktop browsers do anyway. So I though I'd loaded the code into a browser to visualise what you want to do, but I'm still not sure. Would creating this as an html page and calling it as a link from another page work, with a back button included on here to navigte you back do what you want? Alan

sxywebgirl Aspiring developer Posts: 158 Reg: Apr 12, 2013 Altadena, CA 7,530	05/02/13 11:45 AM (12 years ago) I thought I'd read on the forum that it wasnt possible to link to another screen with a button link. I've seen an app that has a working popup tip window. (Koca Chiropractic's app) So I know it can be done, they have a "close" button at the bottom though. Below is the whole html page if you want to get a visual. I created it in dreamweaver then pasted it into a custom html plugin screen in my app. Thanks for your help! <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Contact Us</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> <link href="jquery-mobile/jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css"> <link href="jquery-mobile/jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css"> <script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script> <script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script> </head> <body> <div data-role="page" id="popup-hours"> <div data-role="content"> <div><img src="images/contactUs-popup.png" width="301" height="298" alt="Contact Info"></div> <div data-role="controlgroup" data-type="horizontal"> <a href="tel://7148218080" data-role="button" ><img src="images/phone.png" width="35" height="30" alt="Call Us"><br> Call Us</a> <a href="#popup-hours" data-role="button" data-rel="popup" ><img src="images/www.png" width="35" height="30" alt="Hours"><br> Hours</a><div data-role="popup" id="popup-hours"> <p><strong><u>Lunch Hours:</u> </strong><br> <strong>Monday thru Friday</strong><br> 11:00am to 2:30pm <br> <br> <strong><u>Dinner Hours:</u></strong><br> <strong>Monday thru Thursday</strong><br> 4:30pm to 9:00pm <br> <strong>Friday</strong> - 4:30pm to 10:00pm <br> <strong>Saturday</strong> - 4:00pm to 10:00pm <br> <strong>Sunday</strong> - 4:00pm to 9:00pm <p> </div> <a href="mailto:[email protected]" data-role="button"><img src="images/email.png" width="35" height="30" alt="Email"><br> Email</a></div> </div> </div> </body> </html> Comments I thought I'd read on the forum that it wasnt possible to link to another screen with a button link. I've seen an app that has a working popup tip window. (Koca Chiropractic's app) So I know it can be done, they have a "close" button at the bottom though. Below is the whole html page if you want to get a visual. I created it in dreamweaver then pasted it into a custom html plugin screen in my app. Thanks for your help! <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Contact Us</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> <link href="jquery-mobile/jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css"> <link href="jquery-mobile/jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css"> <script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script> <script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script> </head> <body> <div data-role="page" id="popup-hours"> <div data-role="content"> <div><img src="images/contactUs-popup.png" width="301" height="298" alt="Contact Info"></div> <div data-role="controlgroup" data-type="horizontal"> <a href="tel://7148218080" data-role="button" ><img src="images/phone.png" width="35" height="30" alt="Call Us"><br> Call Us</a> <a href="#popup-hours" data-role="button" data-rel="popup" ><img src="images/www.png" width="35" height="30" alt="Hours"><br> Hours</a><div data-role="popup" id="popup-hours"> <p><strong><u>Lunch Hours:</u> </strong><br> <strong>Monday thru Friday</strong><br> 11:00am to 2:30pm <br> <br> <strong><u>Dinner Hours:</u></strong><br> <strong>Monday thru Thursday</strong><br> 4:30pm to 9:00pm <br> <strong>Friday</strong> - 4:30pm to 10:00pm <br> <strong>Saturday</strong> - 4:00pm to 10:00pm <br> <strong>Sunday</strong> - 4:00pm to 9:00pm <p> </div> <a href="mailto:dominicscypress@yahoo.com" data-role="button"><img src="images/email.png" width="35" height="30" alt="Email"><br> Email</a></div> </div> </div> </body> </html>

sxywebgirl Aspiring developer Posts: 158 Reg: Apr 12, 2013 Altadena, CA 7,530	05/02/13 11:49 AM (12 years ago) This is my first time using jQuery and so I'm struggling. This is where I found an example of some code, it also tells how to add a "close" button but when I try it, it doesn't work for me. http://jquerymobile.com/demos/1.2.0/docs/pages/popup/index.html Comments This is my first time using jQuery and so I'm struggling. This is where I found an example of some code, it also tells how to add a "close" button but when I try it, it doesn't work for me. http://jquerymobile.com/demos/1.2.0/docs/pages/popup/index.html

LA Aspiring developer Posts: 3280 Reg: Aug 16, 2012 Jerseyville, IL 42,900	05/02/13 11:53 AM (12 years ago) Hi @sxywebgirl, Try adding this: $( "#myPopupDiv" ).popup( "close" ) LA Comments Hi @sxywebgirl, Try adding this: $( "#myPopupDiv" ).popup( "close" ) LA

sxywebgirl Aspiring developer Posts: 158 Reg: Apr 12, 2013 Altadena, CA 7,530	05/02/13 11:57 AM (12 years ago) @LA, Please dont laugh, this is all new to me, but I'm not sure where I'd put the script.. Comments @LA, Please dont laugh, this is all new to me, but I'm not sure where I'd put the script..

LA Aspiring developer Posts: 3280 Reg: Aug 16, 2012 Jerseyville, IL 42,900	05/02/13 12:01 PM (12 years ago) @sxywebgirl, It closes the popup so just try it in your code above. LA Comments @sxywebgirl, It closes the popup so just try it in your code above. LA

AlanMac Aspiring developer Posts: 2612 Reg: Mar 05, 2012 Esher, UK 37,120	05/02/13 12:40 PM (12 years ago) Hi again I should have clarifed that I meant you can call one html page from another html page, which is possible. But I also think your code is good. Your code runs OK in firefox on my pc - when I click outside the pop up box, it closes. So I uploaded the html file to my BT server (files> docs). Then I created a custom url plugin, put in the url for the html file and tested it and it worked and closed, no problem. Give that a try Cheers, Alan Comments Hi again I should have clarifed that I meant you can call one html page from another html page, which is possible. But I also think your code is good. Your code runs OK in firefox on my pc - when I click outside the pop up box, it closes. So I uploaded the html file to my BT server (files> docs). Then I created a custom url plugin, put in the url for the html file and tested it and it worked and closed, no problem. Give that a try Cheers, Alan

sxywebgirl Aspiring developer Posts: 158 Reg: Apr 12, 2013 Altadena, CA 7,530	05/02/13 12:54 PM (12 years ago) @LA I tried to put it in the div that is the popup <div data-role="popup" id="popupHours"> but when I save it in buzztouch and then go back and look at the code it is no longer there. That is why I'm wondering where to put it. thanks Comments @LA I tried to put it in the div that is the popup <div data-role="popup" id="popupHours"> but when I save it in buzztouch and then go back and look at the code it is no longer there. That is why I'm wondering where to put it. thanks

LA Aspiring developer Posts: 3280 Reg: Aug 16, 2012 Jerseyville, IL 42,900	05/02/13 12:56 PM (12 years ago) @AlanMac to the rescue! Awesome! You don't need it then @sxywebgirl LA Comments @AlanMac to the rescue! Awesome! You don't need it then @sxywebgirl LA

sxywebgirl Aspiring developer Posts: 158 Reg: Apr 12, 2013 Altadena, CA 7,530	05/02/13 01:04 PM (12 years ago) @AlanMac My code works in dreamweaver but not on the simulator or on my device...but it's working for you! Hmmmm This is my home screen so creating a custom url plugin screen to this html wont work...I'll try it your way to test it on my end though. T. Comments @AlanMac My code works in dreamweaver but not on the simulator or on my device...but it's working for you! Hmmmm This is my home screen so creating a custom url plugin screen to this html wont work...I'll try it your way to test it on my end though. T.

Login + Screen Name Required to Post Login to participate so you can start earning points. Once you're logged in (and have a screen name entered in your profile), you can subscribe to topics, follow users, and start learning how to make apps like the pros.

Discussion Forums > Plugins, Customizing, Source Code

jQuery popup not closing

Title

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments