如何使用 JQuery 打开弹出窗口？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30869889/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I open a popup window using JQuery?
提问by Cristi
I have this sample:
我有这个样本：
https://jsfiddle.net/bac8qdq1/
https://jsfiddle.net/bac8qdq1/
HTML:
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.
我尝试了上面的代码，但不幸的是它不起作用......你能告诉我我们应该如何解决这个问题吗？我希望窗口打开并包含一个 textarea 元素。
回答by Md Johirul Islam
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/
这是编辑过的 jsfiddle https://jsfiddle.net/bac8qdq1/13/
回答by Maddy
I have update the fiddle for you, please take a look. It is working
我已经为你更新了小提琴，请看一看。这是工作
https://jsfiddle.net/bac8qdq1/12/
https://jsfiddle.net/bac8qdq1/12/
$(document).ready(function () {
$("#dialog").dialog({ autoOpen: false, modal: true, height: 590, width: 1005 });
$("#OpenDialog").click(function () {
$("#dialog").dialog('open');
});
});
回答by Tushar
To open dialoguse openoption:
打开dialog使用open选项：
$("#OpenDialog").click(function () {
$(".selector").dialog("open");
});
Docs: http://api.jqueryui.com/dialog/#method-open
文档：http: //api.jqueryui.com/dialog/#method-open
You can also use autoOpenoption to open dialog on initialization:
您还可以使用autoOpen选项在初始化时打开对话框：
$("#OpenDialog").click(function () {
$("#dialog").dialog({
modal: true,
height: 590,
width: 1005,
autoOpen: true
// ^^^^^^^^^^^
});
});
回答by sgromskiy
Or even without JavaScript. Just for fun.
甚至没有 JavaScript。只是为了好玩。
#dialog{
display: none;
}
#dialog:target{
display: block;
}
#close{
position: fixed;
opacity: 0;
}
#close:target + #dialog{
display: none;
}
