creating popup content with jquery

Question

Let's say i have this code

<p id="test">
  some content
<p>
<a href="#" id="test-link">Open</a>

Now i want -using javascript/jquery- to create a popup window, the window content is the content of test paragraph, when test-link is clicked. How could this be done?

Pranay Rana · Accepted Answer · 2010-06-25 12:27:57Z

10

  <a href="javascript:popup();"  id="test-link">Open</a>

function popup()
{
  var generator=window.open('','name','height=400,width=500');

  generator.document.write('<html><head><title>Popup</title>');
  generator.document.write($("#test").html());
  generator.document.write('</body></html>');
  generator.document.close();
}

edited Jun 25, 2010 at 12:27

answered Jun 25, 2010 at 12:22

Pranay Rana

177k37 gold badges244 silver badges267 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bruno · Accepted Answer · 2010-06-25 12:19:34Z

3

You can do this using jQuery UI (dialog) (see examples in the reference documentation).

answered Jun 25, 2010 at 12:19

Bruno

123k33 gold badges278 silver badges389 bronze badges

2 Comments

Ibrahim Hussein Over a year ago

Unfortunately, I want a popup window, not a modal or dialog.

Bruno Over a year ago

In this case, the answer by pranay_stacker should work. I tend to prefer dialogs, since they you can get more control regarding their position and they tend to look better. Some people force popups to open in new tabs and/or prevent them from resizing, since these can be annoying depending on the site, especially auto-opening (onload) popups, although few modern websites seem to use those nowadays.

vertazzar · Accepted Answer · 2010-06-25 12:32:19Z

1

im using http://defunkt.github.com/facebox/ its nice.

answered Jun 25, 2010 at 12:32

vertazzar

1,0637 silver badges10 bronze badges

Comments

Krunal · Accepted Answer · 2010-06-25 12:34:44Z

0

Use jQuery UI dialog to show popup.

For your html:

$(function()
{
    $("#test-link").click(function()
    {
         $("#test").dialog({ resizable: true,
                modal: false, draggable: true
         });
    });
});

If you don't want to go for jQuery UI dialog then you can use ThickBox.

edited Jun 25, 2010 at 12:34

answered Jun 25, 2010 at 12:23

Krunal

3,5513 gold badges26 silver badges27 bronze badges

Collectives™ on Stack Overflow

creating popup content with jquery

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related