javascript 如何创建一个弹出框，用户可以在其中复制文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18342252/
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 to create a popup box where users can copy text?
提问by omega
In my HTML page I generate a link, where users can grab to use for things. I need to somehow give the user the link where they can see the link and then copy the link to clip board.
在我的 HTML 页面中，我生成了一个链接，用户可以在其中抓取以用于事物。我需要以某种方式向用户提供他们可以看到链接的链接，然后将链接复制到剪贴板。
I don't mean copy to clip board through code, just manually selecting the text and clicking ctrl+cor right click+copyis ok.
我的意思不是通过代码复制到剪贴板，只是手动选择文本并单击ctrl+c或right click+copy可以。
Is there a way I can create a popup box where it has text there that you can select and copy?
有什么方法可以创建一个弹出框，其中包含可以选择和复制的文本？
This needs to work with all browsers (IE8+) (Firefox) (Chrome) (especially IE8). So if I use alert box, I will not be able to copy the text so I can't use alerts.
这需要适用于所有浏览器 (IE8+) (Firefox) (Chrome)（尤其是IE8）。因此，如果我使用警报框，则无法复制文本，因此无法使用警报。
Is there some really easy way that doesn't involve lots of code and also not using another HTML file for the popup box or something.
是否有一些非常简单的方法，既不涉及大量代码，也不使用其他 HTML 文件作为弹出框之类的东西。
I can even use jquery if that makes it easy. Really, just a way to show a popup where the user can copy the text, and this is all done with code.
如果方便的话，我什至可以使用 jquery。真的，只是一种显示弹出窗口的方式，用户可以在其中复制文本，而这一切都是通过代码完成的。
Thanks.
谢谢。
回答by Oriol
You could use jQuery ui .dialog()
你可以使用 jQuery ui .dialog()
JS:
JS：
$(function() {
$( "#dialog" ).dialog();
});
HTML:
HTML：
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
回答by Oriol
You could try and use window.prompt() and do something like this: http://www.w3schools.com/js/tryit.asp?filename=tryjs_promptwhere you can copy the text from the input, which can default to the link.
您可以尝试使用 window.prompt() 并执行以下操作：http://www.w3schools.com/js/tryit.asp?filename=tryjs_prompt您可以在其中复制输入中的文本，该文本可以默认为关联。
回答by Joshua
with jquery you can do something like this
使用 jquery 你可以做这样的事情
$(function() {
$( "<div>Your text here </div>" ).dialog();
});
回答by tormex
I'd user a overlaying div, which would appear on a click event. It would contain the text You would like to be able to copy and a close button. (using jQuery!)
我会使用一个重叠的 div，它会出现在点击事件上。它将包含您希望能够复制的文本和一个关闭按钮。（使用jQuery！）
First save Your div's content in a string variable. Let us call this variable divCont.
首先将您的 div 内容保存在字符串变量中。让我们称这个变量为divCont。
After this we create the overlaying div:
在此之后，我们创建覆盖的 div：
var docHeight = $(document).height();
$("body").append("<div id='overlayDiv'></div>").hide().fadeIn("slow");
$overlayDiv = $("#overlayDiv");
$overlayDiv.height(docHeight).css({
'opacity' : 0.9,
'position': 'absolute',
'top': 0,
'background-color': 'black',
'width': '100%',
'z-index': 5000,
'margin-left': 10%,
'margin-right': 10%,
'color': 'white'
});
Then we append the content of the $overlayDiv with our divCont string and we add a close button to it:
然后我们将 $overlayDiv 的内容附加到我们的 divCont 字符串中，并向其添加一个关闭按钮：
$overlayDiv.append(divCont+"<button id='close'>CLOSE</button>'");
After this we add a handler to the close:
在此之后，我们向关闭添加一个处理程序：
$("#close").ready(function(){
$(document).on("click", "#close", function(){
$overlayDiv.fadeOut("slow", function(){
$overlayDiv.remove();
});
});
});
Link to working example -> fiddle
链接到工作示例 ->小提琴
回答by Tate Reynolds
you could use an iframe
你可以使用 iframe
--------opener.html
<html>
<head>
<title>modalopener</title>
<script language="JavaScript" type="text/javascript">
var modalWin = null;
function openModal() {
if (window.showModalDialog) {
modalWin = window.showModalDialog('modalchild.html',null,'dialogWidth=300px; dialogHeight=200px; status=0');
}
}
</script>
</head>
<body>
<a href="javascript:openModal()"><b>open modal window</b></a>
</body>
</html>
--------modalchild.html
<html>
<head>
<title>Modal Child</title>
</head>
<body leftmargin="0" topmargin="0">
<iframe name="modalChild" width="100%" height="100%" src="modaliframe.html" frameborder="0"> </iframe>
</body>
</html>
--------modaliframe.html
<html>
<head>
<title>Modal Iframe</title>
</head>
<body leftmargin=0 topmargin=0 bgcolor="pink">
<div align="center"><br>
<a href="#" onclick="loadIFrm('http://www.yahoo.com')">yahoo</a><br>
<a href="#" onclick="loadIFrm('http://www.google.com')">google</a><br>
<a href="#" onclick="loadIFrm('http://www.hotbot.com')">hotbot</a>
</div>
<script language="JavaScript" type="text/javascript">
// call this to reload
function loadIFrm(url) {
location = url;
}
</script>
</body>
</html>
回答by palerdot
create a fixeddiv in the middle of the screen (or where ever you want it to be) with a input text box within it. You can trigger this structure whenever you generate a link.
在屏幕中间（或您想要的任何位置）创建一个固定的div，其中包含一个输入文本框。您可以在生成链接时触发此结构。
<div id = "clipboard">
<input type = "text"></input>
</div>
CSS style would be
CSS 样式将是
#clipboard{
position: fixed;
left: 40%;
top: 40%;
width: 100px;
height: 30px;
border: thin solid grey;
}
#clipboard input{
width: 100%;
height: 100%;
}
