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
Related
I tried to google but didnt find exactly I am looking for.
I need a sample example code or a resource link to create a modal dialog box and I want to have two boxes(div's) inside the dialog box.
I have to insert different content inside both the boxes(inside the dialog box) when the user clicks.
I know how to create a dialog box but, I would like to particularly know how to insert divs inside it.
I hope my question is clear. Please help.
If you just want to look at the code have a look at the work section of http://www.pixelvalet.com (ok! its my website but then it would help you right?).
The way i approached the issue is:
first i added the template (all the empty divs i needed which i would be populating later on) in the main html file itself
next i gave it a hidden css style to the parent which contained all the divs.
then i added a logic which would tell the browser the which link was clicked and then it would populate the divs in the template appropriately using ajax
it would then slowly fade in using jQuery
but then this isnt the only way you might do this. There are tons of plugins out there which help you create a modal box. but i opted for this route because i wanted it completely customised.
hope it helps.
I have used bootstrap modal for dialog box it works great you check it here:
http://getbootstrap.com/javascript/#modals
The basic idea is just put your dialog box code at bottom of you page,
<div id="my_dialog">
content
</div>
And you detach it in your jquery or other framework you are using or just pure js.
In jquery you can do this:
var my_dialog = $( "#my_dialog" ).detach();
now when ever you need to show it you just attach it to where you want to show it.
and before you attach it you can insert any content you want.
But I would suggest you to use bootstrap's modal much easier.
I'm trying to use Ajaxplorer as a way to choose a file on the server and publish the file path in a form (basically linking the file to a db record). I want the behavior to work like CKFinder's popup functionality. I want the user to click a "choose file" button, Ajaxplorer appears in a new window, the user selects the file, and then the path to that file is sent back to the form and the popup is closed. I'm pretty sure that this is possible because the CKEditor plugin for Ajaxplorer seems to do just that.
I'm new to Ajaxsplorer, so I am just digging in. I was hoping that I could somehow pass a callback method to Ajaxplorer that would populate my field on select. However, it doesn't appear that I can do that based on the docs.
The other option looks like creating a plugin. I'm happy to do this, but the documentation is weak and it seems like others would have done this by now. So, before digging in to that for hours trying to learn the plugin system, I wanted to pose this question to the community. Is there documentation or a plugin for Ajaxplorer that will allow me to send selected file info from a popup window back to my form?
I was able to accomplish this by building a plugin. I have attached the URL to the plugin in case others may want similar functionality.
Ajaxplorer-Popup-Selector
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.
im a backend programmer who wants to have a window that appears in front of the current window when clicking "register".
so that you dont have to redirect to another page.
i think u guys know what i mean.
how do i do that? is it with jquery or javascript? is ajax involved?
and what is that kind of popup box called?
You want to write a div into your HTML that contains your login fields (i.e. the popup window). Set it to position:absolute; and position with CSS so it floats above the page contents and doesn't interrupt the flow when it appears. Get it all nice and positioned where you want it, then set it to display: none; so it will wait for javascript to make it appear.
Then (using jQuery), write something like this:
$('#register').click(function() {
$('#popup').show();
});
where #register is whatever gets clicked (can be most anything with id="register").
What happens whenever that form is submitted is up to you, and not any different from the options you'd have with any other HTML form. jQuery can help with AJAX if you decide to go that route and not send the surfer to another page to process the form.
It can be done using quite a few totally different approaches. As Sam said it's the concept of modal boxes.
You could do it completely on the client side using CSS and JavaScript (alternative), or via AJAX and some third-party libs.
Try being a bit more specific - what's the the backend/frontend environment? Is performance an issue (eg. minimal client-server communication)?
I believe you're referring to a modal form. You can search for modal popup javascript. There is a good javascript component called Lightbox that will help as well.
EDIT:
I mentioned Lightbox, but Lightbox Gone Wild is the one I meant. As others have pointed out, using a modal tool like this all you do is write the html you want to be displayed in the modal popup. That link is a good tutorial on the concept and explains things well.
Have you come across those websites that grey out the full browser window and show you a notification or ask you to fill in a survey .. etc? This used to happen with myspace, if you mistyped in the email or password the full browser window would grey out (it's transparent though, you still can see the contents of the page through it) and a the login controls would display in the center of the browser window with an error message above them telling you that you mistyped the email or password. Unfortunately they removed this from myspace, I want the same code for a website I'm working on and was trying to avoid reinventing the wheel, do you know of any source to find this code instead of writing the whole thing again? I assume this is mostly CSS, Javascript is only used for showing/hiding, am I right?
If you're thinking of using a JavaScript framework, jQuery has the Block UI plugin. Very easy to use and configure.
Demos here
You can also use only CSS and Javascript for this: Create a Modal Dialog Using CSS and Javascript and submodal
These are called 'modal' windows. To avoid reinventing the wheel, use existing libraries like JQuery. Googling 'jquery modal window' brings up lots of results that look like exactly what you want. You could either pick one of these if it does exactly what you want, or find one with good source to deconstruct.
If you prefer prototype.js, there's Prototype Window Class, doing what you want, see alert dialog sample.
If you are working in asp.net and want a quick and easy tool for this get the ajax toolkit. Then use the modal popup control. Here is the example on the AJAX PAGE