1

在我的 HTML 页面中，我生成了一个链接，用户可以在其中抓取以用于事物。我需要以某种方式为用户提供他们可以看到链接的链接，然后将链接复制到剪贴板。

我不是说通过代码复制到剪贴板，只需手动选择文本并单击ctrl+c或即可right click+copy。

有没有办法可以创建一个弹出框，其中有可以选择和复制的文本？

这需要适用于所有浏览器（IE8+）（Firefox）（Chrome）（尤其是IE8）。因此，如果我使用警报框，我将无法复制文本，因此我无法使用警报。

有没有一些非常简单的方法，不涉及大量代码，也没有为弹出框或其他东西使用另一个 HTML 文件。

如果这很容易，我什至可以使用 jquery。真的，只是一种显示弹出窗口的方式，用户可以在其中复制文本，而这一切都是通过代码完成的。

谢谢。

4

6 回答 6

2

你可以使用 jQuery ui.dialog()

JS：

$(function() {
    $( "#dialog" ).dialog();
});

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>
于 2013-08-20T18:23:57.287 回答
2

您可以尝试使用 window.prompt() 并执行以下操作：http ://www.w3schools.com/js/tryit.asp?filename=tryjs_prompt您可以在其中复制输入中的文本，默认为关联。

于 2013-08-20T18:24:15.350 回答
1

使用 jquery 你可以做这样的事情

$(function() {
    $( "<div>Your text here </div>" ).dialog();
});
于 2013-08-20T18:25:30.777 回答
1

我会使用一个覆盖 div，它会出现在点击事件上。它将包含文本您希望能够复制和关闭按钮。（使用 jQuery！）

首先将您的 div 的内容保存在字符串变量中。我们称这个变量为divCont。

在此之后，我们创建覆盖 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'
});

然后我们将 $overlayDiv 的内容附加到我们的 divCont 字符串中，并为其添加一个关闭按钮：

$overlayDiv.append(divCont+"<button id='close'>CLOSE</button>'");

在此之后，我们向关闭添加一个处理程序：

$("#close").ready(function(){
   $(document).on("click", "#close", function(){
      $overlayDiv.fadeOut("slow", function(){
         $overlayDiv.remove();
      });
   });
});

链接到工作示例->小提琴

于 2013-08-20T18:40:40.993 回答
0

在屏幕中间（或您想要的任何位置）创建一个固定的 div，其中包含一个输入文本框。您可以在生成链接时触发此结构。

检查这个小提琴

<div id = "clipboard">
   <input type = "text"></input>
</div>

CSS样式将是

#clipboard{
position: fixed;
left: 40%;
top: 40%;
width: 100px;
height: 30px;
border: thin solid grey;

}

#clipboard input{
    width: 100%;
    height: 100%;

}
于 2013-08-20T18:24:42.900 回答
0

你可以使用 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>
于 2013-08-20T18:27:26.563 回答