Creating a menu inside a tabbed modal dialog (overlay) - javascript

I am going to create a form inside of a tabbed modal dialog (aka modal window, aka overlay). I am wondering which library would be best for this, if one exists at all. It is important that the dialog box have tabs. If there is a great library for creating modal dialogs without tabs but provides an easy way to add tabs, please do suggest that too.

YUI will do what you want. A bit of learning involved though. Worth the effort if you ask me. I'm sure jquery easily allows you to do the same also.

Related

Is there a way to have multiple dialog boxes with Twitter-Bootstrap?

I am using Twitter Bootstrap for everything and it's great but am at the point where I need multiple dialog boxes on the screen. I have not been able to find in the documentation how to do this so I'm assuming it is not something that is included.
I'm looking for something similar to jQuery-UI dialog boxes (NOT modals)
Is there a way to achieve this with Twitter Bootstrap without writing a new piece of code?
There is not problem in doing so. I've a project where it is working fine. There is one 'glitch' the backdrop is stacked so the backdrop (if you use it) of the first dialog is leading and for every dialog one gets stacked on top of it. The dialog you opened first is not greyed out. So probable you want to load you dialog with .modal("show", {backdrop: false}) after the first one and if possible you want your dialogs to be of the same size or bigger then the previously opened dialogs to circumvent the problem.
In our case it's an internal application, so this is not a big issue. But for a public website I could imagine this is a showstopper.

Exempt some elements from Modalness

My application has modal dialogs in it, and also a feedback widget that sticks off the side of the page at all times. I'd like users to be able to click the feedback widget without canceling the modal dialog. In effect, I'd like to exempt the feedback widget from the modal rules of the app.
What's the best way to achieve this? I'm using GWT 2.3, and I'm happy to drill down into whatever layer of abstraction I need to.
"Modal" popups actually don't behave well in GWT; that's why setGlassEnabled has been added. If you use setGlassEnabled, you can then simply set a higher z-index to any element that you want to appear on top of the glass pane, it's just CSS.
Looking at the PopupPanel source it appears that adding your feedback widget as an auto-hide partner will do what you want:
Widget feedback;
DialogBox modal = new DialogBox(false, true);
modal.addAutoHidePartner(feedback.getElement());
modal.show();

Pop up box in Ruby on Rails

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

create a "show up" window when you click register?

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.

How to grey out the full browser window and display a form in the center?

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

Categories

Resources