如何使用 JQuery 打开弹出窗口 window？

Question

我有这个样本：

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

我希望当用户点击 link 打开时，会弹出一个新的 window，里面有一个文本区域。

我试过上面的代码，但不幸的是它没有工作......你能告诉我我们应该如何解决这个问题吗？我希望 window 打开并包含一个文本区域元素。

Answer 1

要打开 dialog 使用 open 选项：

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

文档：http://api.jqueryui.com/dialog/#method-open

您还可以使用 autoOpen 选项在初始化时打开对话框：

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

文档：http://api.jqueryui.com/dialog/#option-autoOpen

Answer 2

这是一个解决方案。你可以试试

 $(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>");
            });
        });

这是编辑后的jsfiddle https://jsfiddle.net/bac8qdq1/13/

Answer 3

我已经为你更新了fiddle，请看一下。正在运行

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

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

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

Answer 4

甚至 without JavaScript。纯属娱乐。

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

如何使用 JQuery 打开弹出窗口 window？

How can I open a popup window using JQuery?

html

css

jquery

jquery-ui

jquery-ui-dialog