网页一键复制弹出提示窗口后几秒后自动关闭提示js代码

一网友让给他网页增加一个一键复制下载链接的功能,用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>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容