一网友让给他网页增加一个一键复制下载链接的功能,用js copy内容后正常用alert输入提示后就行了,但是alert提示框需要点击确定后才能关闭,这无疑增加了一步,浪费时间。就单独再做个提示弹窗让多少秒后自动关闭提示窗口。这不,下面就是已经做好的现成代码了,直接拿去用吧。
HTML里面的js下载链接:
链接: https://pan.baidu.com/s/1bTaRF6MLQY8wl4lBcggQBg 提取码: 8cjt 复制这段内容后打开百度网盘手机App,操作更方便哦
L 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网页一键复制弹出提示窗口后几秒后自动关闭提示js代码</title>
<meta name="keywords" content="提示框插件,SweetAlert" />
<meta name="description" content="SweetAlert可以替代Javascript原生的alert和confirm等函数呈现的弹出提示框,它将提示框进行了美化,并且允许自定义,支持设置提示框标题、提示类型、内容展示图片、确认取消按钮文本、点击后回调函数等。" />
<link rel="stylesheet" type="text/css" href="sweetalert.css"/>
<style>
.demo{width:300px; margin:60px auto 10px auto}
@media only screen and (min-width: 420px) {
.demo{width:500px; margin:60px auto 10px auto}
}
button, .button {
background-color: #AEDEF4;color: white;border: none;box-shadow: none;
font-size: 17px;font-weight: 500;font-weight: 600;
border-radius: 3px;padding: 15px 35px;margin: 26px 5px 0 5px;cursor: pointer; }
button:hover, .button:hover {background-color: #a1d9f2; }
</style>
</head>
<body>
<div class="demo1">
<div hidden id="keydiv">Hello World</div>
<a class="btn btn-sm btn-default" onclick="copyText()">点此复制</a>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="sweetalert.min.js"></script>
<script type="text/javascript">
function copyText() {
var Url2 = document.getElementById("keydiv").innerText;
var oInput = document.createElement('input');
oInput.value = Url2;
document.body.appendChild(oInput);
oInput.select();
document.execCommand("Copy");
oInput.className = 'oInput';
oInput.style.display = 'none';
}
$(function() {
$(".demo1 a").click(function() {
swal({
title: "复制好啦!",
text: '自定义<span style="color:red">图片</span>、<a href="http://www.520ym.net">HTML内容</a>。<br/>5秒后自动关闭。',
imageUrl: "thumbs-up.jpg",
html: true,
timer: 5000,
showConfirmButton: false
});
});
});
</script>
</body>
</html>