How to create a popup box where users can copy text?

问题

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.

I don't mean copy to clip board through code, just manually selecting the text and clicking ctrl+c or right click+copy is ok.

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.

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.

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.

Thanks.

回答1:

You could use 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>

回答2:

You could try and use window.prompt() and do something like this: http://www.w3schools.com/js/tryit.asp?filename=tryjs_prompt where you can copy the text from the input, which can default to the link.

回答3:

with jquery you can do something like this

$(function() {
    $( "<div>Your text here </div>" ).dialog();
});

回答4:

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!)

First save Your div's content in a string variable. Let us call this variable divCont.

After this we create the overlaying 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.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

回答5:

create a fixed div 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.

check this fiddle

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

CSS style would be

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

}

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

}

回答6:

you could use an 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>

来源：https://stackoverflow.com/questions/18342252/how-to-create-a-popup-box-where-users-can-copy-text

标签

javascript

jquery

html

popup