How can I open a popup window using JQuery?

Question

I have this sample:

HTML:

<a id="OpenDialog" href="#">Click here to open dialog</a>
<div id="dialog" title="Dialog Title">
    <p>test</p>
</div>

JQuery:

$(document).ready(function () {
    $("#OpenDialog").click(function () {
        $("#dialog").dialog({
            modal: true,
            height: 590,
            width: 1005
        });
    });
});

I want that when a user clicks on the link to open, a new window pops up with a text area inside.

I tried the above code, but unfortunately it did not work ... Can you tell me how we should solve this problem? I want the window to open and contain a textarea element.

What went wrong? Is there a console error? Did you do any debugging? — Sterling Archer, Jun 16 '15 at 14:03
@RinoRaj there is already a fiddle in the question of the OP — Mivaweb, Jun 16 '15 at 14:03
Your fiddle is missing a reference to jqueryui https://jsfiddle.net/bac8qdq1/1/ — artm, Jun 16 '15 at 14:06
The "duplicate" is about creating a sliding model, this question is about creating a new window. — Tony Chiboucas, Jan 03 '18 at 23:43

Md Johirul Islam · Accepted Answer · 2015-06-16T14:40:33.063

8

Here is a solution. Yo can try

 $(document).ready(function () {
            $("#OpenDialog").click(function () {
                //$("#dialog").dialog({modal: true, height: 590, width: 1005 });
                var w = window.open("", "popupWindow", "width=600, height=400, scrollbars=yes");
                var $w = $(w.document.body);
                $w.html("<textarea></textarea>");
            });
        });

Here is the edited jsfiddle https://jsfiddle.net/bac8qdq1/13/

edited Jun 16 '15 at 14:40

answered Jun 16 '15 at 14:08

Md Johirul Islam

5,042
4
23
56

1

I think it's not good to fiddle link – Cristi Jun 16 '15 at 14:14
Hey sorry for the wrong link. I updated it – Md Johirul Islam Jun 16 '15 at 14:19
Otherwise you have to use jquery ui as reference. You fiddle is not using that. – Md Johirul Islam Jun 16 '15 at 14:28
Amen brother! I took the three lines inside the click handler and it worked beautifully – clearlight Feb 18 '19 at 01:37

score 4 · Answer 2 · answered Jun 16 '15 at 14:16

4

I have update the fiddle for you, please take a look. It is working

https://jsfiddle.net/bac8qdq1/12/

$(document).ready(function () {
    $("#dialog").dialog({ autoOpen: false, modal: true, height: 590, width: 1005 });

            $("#OpenDialog").click(function () {
                $("#dialog").dialog('open');
            });
        });

answered Jun 16 '15 at 14:16

Maddy

907
3
10
25

1

also, I have added jqueryui, css. please make sure that you have added that. – Maddy Jun 16 '15 at 14:25

Tushar · Answer 3 · 2015-06-16T14:12:32.047

To open dialog use open option:

$("#OpenDialog").click(function () {
    $(".selector").dialog("open");
});

Docs: http://api.jqueryui.com/dialog/#method-open

You can also use autoOpen option to open dialog on initialization:

$("#OpenDialog").click(function () {
    $("#dialog").dialog({
        modal: true,
        height: 590,
        width: 1005,
        autoOpen: true
        // ^^^^^^^^^^^
    });
});

Docs: http://api.jqueryui.com/dialog/#option-autoOpen

score 1 · Answer 4 · answered Jun 16 '15 at 14:40

1

Or even without JavaScript. Just for fun.

#dialog{
  display: none;
}
#dialog:target{
  display: block;
}
#close{
  position: fixed;
  opacity: 0;
}
#close:target + #dialog{
  display: none;
}

answered Jun 16 '15 at 14:40

sgromskiy

300
1
4

Thank for this, It is good. Do you know is it support by all browsers, like IE 7-11, chrome, firefox, opera, safari? – Maddy Jun 16 '15 at 15:20
My pleasure. There is nothing new, so it should works well in all browsers. – sgromskiy Jun 16 '15 at 16:23

How can I open a popup window using JQuery?

4 Answers4