铜仁一个网页文件下利用JS代码增加多个复制按钮自动关弹窗提示方法

发布时间：2024-09-08

先看例子，加上JS文件正常会弹出弹窗，需要用户手动关闭，在javascript中，alert函数用于弹出一个警告框，并且这个框是由浏览器管理的，它没有提供API来自动关闭它。一旦alert被调用，用户必须手动关闭这个警告框。因此，你不能通过javascript代码来自动关闭alert。如果你想要给用户一个反馈，但又不想让用户手动关闭警告框，你可以考虑使用其他的方式，处理后的效果，弹出提示可根据CSS调整位置。

调整后效果：http://www.cxhao.com/html/szxf/market/xs/3867.html

1715266156-4fc89baf7415543 1、原始JS代码如下，onclick="copyToClipboard触发提示，该方法会弹出弹窗提示，需要手动关闭

网页文件<input type="button" value="复制" onclick="copyToClipboard('复制的内容文本')">

JS文件代码

2、原始JS，onclick="copyToClipboard触发提示，该方法不会弹出弹窗提示，但不会提示用户，体验上感觉不知道复制成功没有，以便在复制文本到剪贴板后不弹出任何窗口（alert），您只需删除或注释掉与 alert 相关的代码行。下面是修改后的代码：

网页文件代码<input type="button" value="复制" onclick="copyToClipboard('复制的内容文本')">

JS文件代码

3、网页文件代码<input type="button" value="复制" onclick="copyToClipboard('复制的内容文本')"> 该方法会有弹窗提示通过CSS实现，用户不需要关闭弹窗什么的，体验较好，可以通过CSS控制弹窗的提示文字位置，在javascript中，alert函数用于弹出一个警告框，并且这个框是由浏览器管理的，它没有提供API来自动关闭它。一旦alert被调用，用户必须手动关闭这个警告框。因此，你不能通过javascript代码来自动关闭alert。

如果你想要给用户一个反馈，但又不想让用户手动关闭警告框，你可以考虑使用其他的方式，比如：

使用控制台输出：像前面提到的那样，你可以使用console.log或console.error在浏览器的开发者控制台中显示信息。
使用自定义的HTML元素：你可以创建一个自定义的HTML元素（比如一个<div>或<span>），通过修改其样式和内容来显示成功或失败的消息。你还可以使用javascript的setTimeout函数配合一些CSS动画来实现这个元素的自动隐藏。
使用模态框（Modal）：如果你想要一个更复杂的用户界面，可以使用像Bootstrap这样的库来创建一个模态框，然后使用javascript来控制它的显示和隐藏。

以下是一个简单的示例，展示了如何使用一个自定义的HTML元素和CSS动画来显示一个会自动隐藏的消息：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复制到剪贴板</title>
<style>
#copy-status {
position: fixed;
top: 20px;
right: 20px;
padding: 10px;
background-color: #333;
color: #fff;
border-radius: 5px;
opacity: 1;
transition: opacity 1s;
}

#copy-status.hidden {
opacity: 0;
pointer-events: none;
}
</style>
</head>
<body>

<button onclick="copyToClipboard('Hello, World!')">复制到剪贴板</button>
<div id="copy-status"></div>

let statusElement = document.getElementById('copy-status');
statusElement.textContent = "复制成功！";
statusElement.classList.remove('hidden');

// 设置定时器来自动隐藏消息
setTimeout(function() {
statusElement.classList.add('hidden');
}, 2000); // 2秒后隐藏

a.remove();
}
</script>

</body>
</html>

在这个示例中，我们创建了一个ID为copy-status的<div>元素，它初始时是不可见的（通过CSS类hidden）。当copyToClipboard函数被调用并且复制成功时，我们通过修改textContent和移除hidden类来显示这个元素。然后，我们使用setTimeout设置一个定时器，在2秒后添加hidden类，使这个元素逐渐变得透明并隐藏起来。这样，用户就不需要手动关闭任何窗口或框，消息会自动消失。

官网地址：https://www.50yun.net

免费注册：https://www.50yun.net/col-reg/

赶快注册 - 创建自己的线上数字化运营系统吧

标签：

上一篇：铜仁ChatGPT付费创作系统Midjourney绘画生成一直显示排队中解决办法

下一篇：铜仁TBWeb系统由于百度文本审核引起前端对话时提示出错internal server error解决办法