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

Question

我有这个示例：

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

我希望当用户点击链接时，弹出一个新窗口，其中包含文本区域。

我尝试了上面的代码，但不幸的是它没有起作用...你能告诉我我们应该如何解决这个问题吗？ 我希望窗口打开并包含一个textarea元素。

- Cristi

---

出了什么问题？有控制台错误吗？你进行了调试吗？ - Sterling Archer

@RinoRaj，问题的OP已经在该问题中提供了一个fiddle。 - Mivaweb

你的JSFiddle缺少对jQuery UI的引用：https://jsfiddle.net/bac8qdq1/1/ - artm

"复制"是关于创建一个滑动模型，这个问题是关于创建一个新窗口。 - Tony Chiboucas

Answer 1

这里有一个解决方案。你可以尝试使用。

 $(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/

- Md Johirul Islam

---

我认为在编程中搞链接不是一个好习惯。 - Cristi

抱歉，链接错误了。我已经更新了。 - Md Johirul Islam

否则，您必须使用jQuery UI作为参考。您的fiddle没有使用它。 - Md Johirul Islam

阿门兄弟！我把点击处理程序中的三行代码拿出来，它完美地运行了。 - clearlight

Answer 2

我已经为您更新了这个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');
            });
        });

- Maddy

---

另外，我已经添加了jqueryui和css，请确保您已经添加了它们。 - Maddy

Answer 3

使用“打开”选项打开对话框：dialog。保留HTML标记，不做解释。

$("#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

- Tushar

Answer 4

甚至没有JavaScript也可以。只是为了好玩。

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

- sgromskiy

---

谢谢这个，很好。你知道它是否被所有浏览器支持，比如IE 7-11，chrome，firefox，opera，safari吗？ - Maddy

很高兴为您服务。没有什么新的，所以它应该在所有浏览器中都能正常工作。 - sgromskiy