I am trying to make a Login popup window. For example, if someone clicked the login button a popup window will show and it will change the opacity of the main page and give focus to the popup window.
Here is an example of a web site that utilizes what I want to implement.
You can use the jquery dialog referenced in your post for this.
Here is an example of how to create form elements on it.
you could use jqueryUI dialog
you could also use the jQuery BlockUI plugin:
http://plugins.jquery.com/project/blockUI
I've used the Boxy plugin before, it's very lightweight (lighter than JQueryUI, although not as much functionality).
It's very easy to use, it was the first plugin I used when learning jQuery.
http://jqueryui.com/dialog/#modal-form
use this site link
Use a modal dialog to require that the user enter data during a multi-step process. Embed form markup in the content area, set the modal option to true, and specify primary and secondary user actions with the buttons option.
Related
I have a application where i make all Divs clickable by using this code :
$("html").click(function(){
alert("Click");
return false;
});
This one work normally for all divs. Well, when Alert popup, the Background behind alert box cannot be clicked. How can i turn that to be clickable too?
PS: Right Click on the Background dont work too.
Thats not possible. You have to use a JS plugin doing the alert, so you can influence the behaviour (like the jquery ui modal widget, mentioned here). But with the browser alert this is not possible, as far as i know.
Not sure how to do exactly what you're asking (if it's possible). Maybe someone else can shed some light on that.
But a solution you could look into would be the dialog widget from jQuery UI. You can easily create pop-ups, modal or non-modal (meaning with the background faded out or not).
http://jqueryui.com/dialog/
They have some demos there, but it's as simple as created a div with some text and calling...
$("#the_div_id").dialog();
Other config parameters can be found from the API:
http://api.jqueryui.com/dialog/
By default its modal popup behaviour ,If you want to clickable
Assuming you are using Jquery Ui dialog
Try with the option modal
$('#selector').dialog("option","modal",false);
http://api.jqueryui.com/dialog/#option-modal
Would the proper way to add them be
A) hiding the div contents on the page and showing it when bound to a click
OR
B) just fetching the data asynchronously and loading it into an empty div that's hidden on the page?
Per the responses below... Use cases? Here:
1) Logging in
2) Showing a "share modal box w/ social sharing stuff"
3) Submission of data
I personally like to create them on-the-fly.
dialog = $("<div></div>");
dialog.html(content);
dialog.dialog({modal:true});
This is using jQuery UI's dialog feature, but just wanted to example creating on the fly.
I would say the best way to go far would be to use the FancyBox Plugin
All the examples you need have a DEMO here
How to create an html look up field. So, I want to achieve
an html input field, with an icon/button next to it
when user click on it, a pop-up window displays with a search form (I assume this can be created beforehand and hide using javascript)
user apply search, and data is displayed in the same (pop-up) window
when user select a value and apply ok, the field value is copied to the original input filed, and pop-up window closes.
Any sample code? Is there any simple way without using any java script library? or any simple plugin for jquery.
thanks.
It would be possible, but very unwise to do this without any libraries or plug-ins.
I strongly recommend jQuery UI's Dialog widget. It's very simple, well documented and easy to use.
You will probably be interested specifically in how to use the Dialog to display a form. Click the View Source link on that page to see all of the mark-up and code required to achieve that effect.
I have some ajax calls in one of my pages. On complete I want do display a simple message letting the user know that the operation has been completed. maybe with an ok button that they can click to close the window. Alert("message") would work if I could remove the title and that scary "!" icon.
Any jquery/javascript sugestions? -Thanks
Check out the jquery ui Dialog plugin:
http://jqueryui.com/demos/dialog/
You can customize it to suit your needs, and add what ever kind of buttons you want. It's just HTML inside the dialog.
Could use a modal dialog. Check out the modal dialog in jQuery UI http://jqueryui.com/demos/dialog/
Basically when the AJAX request is completed and successful you can open your dialog with an ok button and display whatever title you would like.
I like simplemodal. It also has a confirm style dialog - this looks similar to the default alert/confirm dialogs. You can see a demo here.
I want to display a popup windo on my rails application... Here is exactly what i want is . I have the line called "My profile" (for link i used link_to). if user clicks the link the popup should come out and displays the user's profile details.... i tried with :popup => 'true' option but it creates new window. i want some Ajax kind of stuff... can any one help me on this.
This is not a ruby-on-rails question. What you need is some javascript library to do that. As mentioned by Salil, lightbox is one such library. Others include:
colorbox
jQuery UI dialog
Fancybox
shadowbox
I personally tried lightbox, thickbox (no longer supported), colorbox, and shadowbox, and found colorbox to best fit my needs.
use lightbox to achive it.Rails provide lightbox_helper plugin.
Here is the path I would follow: First, you "load" data from your application with the JQuery load function. For this you can use a normal controller action with a some basic view. Then, you want to put it in a fancy Jquery popup, e.g. explained here