How can I open a popup window using JQuery?

Question

I have this sample:

https://jsfiddle.net/bac8qdq1/

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.

Answer 1

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/

Answer 2

Or even without JavaScript. Just for fun.

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

Answer 3

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

Answer 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');
            });
        });