How to have a jQuery popup window using only jQuery (without other plugins)

Question

I need to know, whether we can do jQuery popup only using jQuery without using other plugins like Fancybox, Lightbox, etc.

Answer 1

You can do something like this:

var mywin = window.open("", "my_popup", "location=0,status=0,scrollbars=0,width=500,height=500");
var contents = "HTML content...";
$(mywin.document.body).html(contents);

Answer 2

Basically, the style of popup I think you're talking about is just an absolutely-positioned element with a higher z-index that anything else on the page:

$("<div style='z-index: 100; position: absolute; left: 100px; top: 100px; background-color: #ecc; border: 1px solid black'>Hi there</div>").appendTo(document.body);

Live example

There are lots of useful things that these plug-ins are likely to do for you, though, including:

• Providing a "shim" on the rest of the page, behind the popup, that prevents clicks elsewhere (if you want the popup to be modal).
• Using an iframe for the shim so that Flash animations and OS-based form controls don't show on top of your popup (even though they should be lower in the z order) because of issues with Certain Browsers
• Providing a built-in means of closing the popup (a close box, Esc key, etc.)
• Providing automatic centering

Etc., etc. But if you have a strong reason to re-invent the wheel (and sometimes there is a reason), the above should get you started.

Answer 3

Yes, you can. The only question is that whether you need to re-invent the wheel or not.

For opening a popup just follow these steps

1. Create an element that acts as the popup and hide it (positioned absolute, higher z-index)
2. Code for showing the element at the desired position
3. Close method for popup(most of the plugins have different options for this; you can click on a close button or use Esc key)

If you want the background to be disabled then you will have to create another element and set the opacity. If you want all select boxes and iframes to be under the popup(for IE6) then you will have to use an ifram embedded in the overlay element.

Answer 4

Why not use the Jquery API ? http://docs.jquery.com/UI/Dialog