您需要先安装一个扩展,例如 篡改猴、Greasemonkey 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 Userscripts ,之后才能安装此脚本。
您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。
您需要先安装用户脚本管理器扩展后才能安装此脚本。
创建一个自定义透明提示框,并支持显示位置、自动关闭时间、透明度、是否显示关闭按钮、背景颜色和文字颜色
此脚本不应直接安装。它是供其他脚本使用的外部库,要使用该库请加入元指令 // @require https://update.gf.qytechs.cn/scripts/505159/1434644/show_message.js
- // ==UserScript==
- // @name 自定义透明提示框
- // @namespace http://tampermonkey.net/
- // @version 0.1
- // @description 创建一个自定义透明提示框,并支持显示位置、自动关闭时间、透明度、是否显示关闭按钮、背景颜色和文字颜色
- // @match *://*/*
- // @grant none
- // @run-at document-end
- // ==/UserScript==
- /**
- * 显示自定义的提示框
- * @param {Object|string} options - 配置对象或提示消息字符串
- * @param {string} options.message - 提示框中的内容
- * @param {string} [options.type='info'] - 提示框的类型,可以是 'success'(成功), 'error'(错误), 'warning'(警告), 'info'(信息),或自定义 {backgroundColor: '#color', textColor: '#color'}
- * @param {string} [options.position='center-top'] - 提示框的位置,可以是 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'center-top', 'center-bottom', 'center'
- * @param {number} [options.opacity=0.8] - 提示框的透明度,范围是 0(完全透明)到 1(完全不透明)
- * @param {boolean|number} [options.autoClose=3] - 自动关闭提示框的时间(秒)。如果设置为 `false`,则不自动关闭,并强制显示关闭按钮
- * @param {boolean} [options.hasCloseButton] - 是否显示关闭按钮,当 autoClose 为 false 时,强制设置为 true
- */
- function show_message(options) {
- // 如果传递的是字符串,将其转为对象并使用默认配置
- if (typeof options === 'string') {
- options = {
- message: options,
- type: 'info',
- position: 'center-top',
- opacity: 0.7,
- autoClose: 3
- };
- }
- const {
- message,
- type = 'info',
- position = 'center-top',
- opacity = 0.8,
- autoClose = 3,
- } = options;
- const predefinedTypes = {
- success: { backgroundColor: '#e0f7da', textColor: '#67C23A' },
- error: { backgroundColor: '#fddede', textColor: '#f56c6c' },
- warning: { backgroundColor: '#fde3cf', textColor: '#e6a23c' },
- info: { backgroundColor: '#d3d4d6', textColor: '#404040' }, // 字体颜色加深
- };
- let backgroundColor, textColor;
- if (typeof type === 'string') {
- ({ backgroundColor, textColor } = predefinedTypes[type] || predefinedTypes['info']);
- } else if (typeof type === 'object') {
- ({ backgroundColor, textColor } = type);
- }
- // 当 autoClose 为 false 时,强制显示关闭按钮
- const hasCloseButton = autoClose === false || options.hasCloseButton;
- // 生成唯一的类名
- const uniqueClass = `custom-notification-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
- // 创建提示框的 HTML
- const notification = document.createElement('div');
- notification.className = uniqueClass;
- notification.innerHTML = `
- <div class="custom-notification-content">
- <p>${message}</p>
- ${hasCloseButton ? '<button id="closeNotification">✖</button>' : ''}
- </div>
- `;
- document.body.appendChild(notification);
- // 设置提示框的样式
- const style = document.createElement('style');
- style.textContent = `
- .${uniqueClass} {
- position: fixed;
- background-color: ${backgroundColor};
- color: ${textColor};
- padding: 15px;
- border-radius: 8px;
- display: none;
- box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
- z-index: 9999;
- transition: opacity 0.5s ease, transform 0.5s ease;
- max-width: 300px;
- overflow: hidden;
- opacity: ${opacity};
- font-size: 14px;
- }
- .${uniqueClass} .custom-notification-content {
- display: flex;
- align-items: center;
- justify-content: space-between;
- word-wrap: break-word;
- }
- .${uniqueClass} button {
- background: none;
- color: #a0a0a0;
- border: none;
- padding: 0;
- margin-left: 10px;
- font-size: 16px;
- cursor: pointer;
- transition: color 0.3s ease;
- }
- .${uniqueClass} button:hover {
- color: #404040;
- }
- `;
- document.head.appendChild(style);
- // 根据位置设置提示框的位置
- function setPosition() {
- const positions = {
- 'top-right': { top: '20px', right: '20px', bottom: '', left: '' },
- 'top-left': { top: '20px', left: '20px', bottom: '', right: '' },
- 'bottom-right': { bottom: '20px', right: '20px', top: '', left: '' },
- 'bottom-left': { bottom: '20px', left: '20px', top: '', right: '' },
- 'center-top': { top: '20px', left: '50%', transform: 'translateX(-50%)', bottom: '', right: '' },
- 'center-bottom': { bottom: '20px', left: '50%', transform: 'translateX(-50%)', top: '', right: '' },
- 'center': { top: '50%', left: '50%', transform: 'translate(-50%, -50%)', bottom: '', right: '' }
- };
- const pos = positions[position] || positions['center-top'];
- Object.assign(notification.style, pos);
- }
- setPosition();
- // 显示提示框
- notification.style.display = 'block';
- notification.style.opacity = opacity;
- // 关闭提示框的函数
- function closeNotification() {
- notification.style.opacity = '0';
- notification.style.transform += ' translateY(20px)';
- setTimeout(() => {
- notification.style.display = 'none';
- document.body.removeChild(notification);
- document.head.removeChild(style);
- }, 500);
- }
- // 如果有关闭按钮,为其添加事件监听
- if (hasCloseButton) {
- const closeNotificationButton = document.getElementById('closeNotification');
- closeNotificationButton.addEventListener('click', closeNotification);
- }
- // 判断是否需要自动关闭
- if (typeof autoClose === 'number') {
- setTimeout(closeNotification, autoClose * 1000);
- }
- }
- // 示例调用
- // 使用所有参数的调用方式
- // show_message({
- // message: '这是一个完全配置的提示框', // 提示框的内容
- // type: 'success', // 成功类型提示框
- // position: 'center', // 屏幕正中显示
- // opacity: 0.9, // 透明度为 0.9
- // autoClose: false, // 不自动关闭
- // });
- // 自定义显示颜色
- // show_message({
- // message: "这是一个自定义样式的提示框",
- // type: {
- // backgroundColor: '#f0e68c', // 浅黄色背景
- // textColor: '#8b4513' // 深棕色文字
- // },
- // position: 'bottom-left', // 在屏幕左下角显示
- // opacity: 0.8, // 透明度为0.9
- // autoClose: 7 // 7秒后自动关闭
- // });
- // 使用简单的字符串调用方式(默认配置)
- // show_message("已成功加载信息提示框功能");
- console.log("已成功加载信息提示框功能");
QingJ © 2025
镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址