How to open a html page as a popup with in the page (no new window opens) using Jquery - jquery-ui

I am having the link button and when i clicked on the link button the popup will be open (with in the page itself like a modalpopup. now i have to get the popup feel using jquery and inside the div text should come from database.
How is it possible for getting the message from the backend.
means open a div in a modal popup feel using jquery
or opens the html page in a popup in the same window using jquery
Thanks and Regards
Vara Prasad.M

Take a look at the Facebox jQuery plugin. It does pretty much exactly what you're asking for. For example you can have a link like this to some remote page like so
text
then just call the facebox plugin when your content is loaded like so
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()
});
and your content will render in a modal window. You can also take a look at Fancybox or ThickBox which provide very similar functionality.

There are two steps to your problem:
Open a modal popup using jQuery
Fetch server side content and display it in the modal dialog
Use jQuery Dialog (http://docs.jquery.com/UI/Dialog) for popping open a modal dialog, and then use jQuery load (http://api.jquery.com/load/) for loading the content from the server.
The server page you call will make the database query and output the contents to the response buffer.

Related

Jquery mobile popup content appearing during page load

I'm using Jquery Mobile in my website, and I have a page with popups. I don't directly navigate to this page, but I inject the content with Ajax :
$("#myDiv").html(data).enhanceWithin();
The problem is that occasionally, when the page is loading, the popups content appear for half a second on the screen and then disappear...
Is there a way to avoid that ?

Programatically open a dialog as popup with jQuery Mobile

So I have a page and a dialog. When the user click the page button, one AJAX request will open the dialog with the results. Something like that simple example without AJAX: http://jsfiddle.net/rBBpx/
It works. The dialog opens programatically. But it hides the page content, showing the dialog as if it's another page. I know that popup's can open dialogs in-page with links, but I didn't get the point in how I can do that programatically.
I tried to change $.mobile.changePage() call to that, but it didn't worked as I expected:
$('#dialog').popup();
$('#dialog').popup('open');
How can I show that dialog in-page, as a popup? Is it ever possible? Thank you in advance!
In case you use phonegap, there is an alert plugin: http://docs.phonegap.com/en/edge/cordova_notification_notification.md.html
navigator.notification.alert("your AJAX result here");

Link from modal in modal

I am using VirtueMart 2.0.10 and Joomla 2.5 and the products page is set to open in a modal popup. In this way any additions to the cart trigger a second modal (modal in modal, if you like) that includes links. At the moment the links open in the first modal that opened, but I would like the pages to open in the original window from where we started.
How do I modify the href links to open in the original window not in the modal popup? Or do I need to write some script for this?
Thanks for any help!!!

Primefaces LightBox slows down loading of the page opened inside LightBox

I am using Primefaces LightBox popup window in my application. The problem I am facing is when I click the link to open the corresponding page, it's too slow to display the page through LightBox. It's take more time to loading. How can I solve it?
Link for LightBox :
<p:lightBox style="display:inline">
Login
</p:lightBox>
When I click the link, the corresponding page login.xhtml is to be opened through LightBox. I am using PrimeFaces 3.0 and JSF 2.0.
Check out the Dialog component as a replacement for LightBox for your scenario. Dialog can replicate Lightbox's popup capabilities with the additional ability to make the login page modal (e.g. you can force the user to either complete the login process or close the login popup). Furthermore, unlike LightBox, Dialog is capable of pre-rendering its content so when the Dialog is popped-up, the user wont experience any UI delay due to the popup going to fetch its content. Note, if you want to keep the login page in a separate xhtml file, you can include it inside the Dialog component using a Facelets include.

next & previous button not working properly in jquery mobile

I m new to Jquery I have created example jquery mobile in this if back and login button is used once then next(>>) and prevoius(<<) button display the same page not that which is refferd using href tag. Before using Back button and login button it work fine afterusing those button it works abnormally.
edit and to view demo http://jsfiddle.net/khushbujoshi/JERG4/5/
DOM Element IDs are unique don't use them twice.
You don't need to do the page change on your own with jQuery. Let jQuery-mobile handle it.

Resources