show_message

创建一个自定义透明提示框,并支持显示位置、自动关闭时间、透明度、是否显示关闭按钮、背景颜色和文字颜色

此脚本不应直接安装。它是供其他脚本使用的外部库,要使用该库请加入元指令 // @require https://update.gf.qytechs.cn/scripts/505159/1434644/show_message.js

  1. // ==UserScript==
  2. // @name 自定义透明提示框
  3. // @namespace http://tampermonkey.net/
  4. // @version 0.1
  5. // @description 创建一个自定义透明提示框,并支持显示位置、自动关闭时间、透明度、是否显示关闭按钮、背景颜色和文字颜色
  6. // @match *://*/*
  7. // @grant none
  8. // @run-at document-end
  9. // ==/UserScript==
  10.  
  11.  
  12.  
  13. /**
  14. * 显示自定义的提示框
  15. * @param {Object|string} options - 配置对象或提示消息字符串
  16. * @param {string} options.message - 提示框中的内容
  17. * @param {string} [options.type='info'] - 提示框的类型,可以是 'success'(成功), 'error'(错误), 'warning'(警告), 'info'(信息),或自定义 {backgroundColor: '#color', textColor: '#color'}
  18. * @param {string} [options.position='center-top'] - 提示框的位置,可以是 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'center-top', 'center-bottom', 'center'
  19. * @param {number} [options.opacity=0.8] - 提示框的透明度,范围是 0(完全透明)到 1(完全不透明)
  20. * @param {boolean|number} [options.autoClose=3] - 自动关闭提示框的时间(秒)。如果设置为 `false`,则不自动关闭,并强制显示关闭按钮
  21. * @param {boolean} [options.hasCloseButton] - 是否显示关闭按钮,当 autoClose 为 false 时,强制设置为 true
  22. */
  23. function show_message(options) {
  24. // 如果传递的是字符串,将其转为对象并使用默认配置
  25. if (typeof options === 'string') {
  26. options = {
  27. message: options,
  28. type: 'info',
  29. position: 'center-top',
  30. opacity: 0.7,
  31. autoClose: 3
  32. };
  33. }
  34.  
  35. const {
  36. message,
  37. type = 'info',
  38. position = 'center-top',
  39. opacity = 0.8,
  40. autoClose = 3,
  41. } = options;
  42.  
  43. const predefinedTypes = {
  44. success: { backgroundColor: '#e0f7da', textColor: '#67C23A' },
  45. error: { backgroundColor: '#fddede', textColor: '#f56c6c' },
  46. warning: { backgroundColor: '#fde3cf', textColor: '#e6a23c' },
  47. info: { backgroundColor: '#d3d4d6', textColor: '#404040' }, // 字体颜色加深
  48. };
  49.  
  50. let backgroundColor, textColor;
  51. if (typeof type === 'string') {
  52. ({ backgroundColor, textColor } = predefinedTypes[type] || predefinedTypes['info']);
  53. } else if (typeof type === 'object') {
  54. ({ backgroundColor, textColor } = type);
  55. }
  56.  
  57. // 当 autoClose 为 false 时,强制显示关闭按钮
  58. const hasCloseButton = autoClose === false || options.hasCloseButton;
  59.  
  60. // 生成唯一的类名
  61. const uniqueClass = `custom-notification-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
  62. // 创建提示框的 HTML
  63. const notification = document.createElement('div');
  64. notification.className = uniqueClass;
  65. notification.innerHTML = `
  66. <div class="custom-notification-content">
  67. <p>${message}</p>
  68. ${hasCloseButton ? '<button id="closeNotification">✖</button>' : ''}
  69. </div>
  70. `;
  71. document.body.appendChild(notification);
  72.  
  73. // 设置提示框的样式
  74. const style = document.createElement('style');
  75. style.textContent = `
  76. .${uniqueClass} {
  77. position: fixed;
  78. background-color: ${backgroundColor};
  79. color: ${textColor};
  80. padding: 15px;
  81. border-radius: 8px;
  82. display: none;
  83. box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  84. z-index: 9999;
  85. transition: opacity 0.5s ease, transform 0.5s ease;
  86. max-width: 300px;
  87. overflow: hidden;
  88. opacity: ${opacity};
  89. font-size: 14px;
  90. }
  91. .${uniqueClass} .custom-notification-content {
  92. display: flex;
  93. align-items: center;
  94. justify-content: space-between;
  95. word-wrap: break-word;
  96. }
  97. .${uniqueClass} button {
  98. background: none;
  99. color: #a0a0a0;
  100. border: none;
  101. padding: 0;
  102. margin-left: 10px;
  103. font-size: 16px;
  104. cursor: pointer;
  105. transition: color 0.3s ease;
  106. }
  107. .${uniqueClass} button:hover {
  108. color: #404040;
  109. }
  110. `;
  111. document.head.appendChild(style);
  112.  
  113. // 根据位置设置提示框的位置
  114. function setPosition() {
  115. const positions = {
  116. 'top-right': { top: '20px', right: '20px', bottom: '', left: '' },
  117. 'top-left': { top: '20px', left: '20px', bottom: '', right: '' },
  118. 'bottom-right': { bottom: '20px', right: '20px', top: '', left: '' },
  119. 'bottom-left': { bottom: '20px', left: '20px', top: '', right: '' },
  120. 'center-top': { top: '20px', left: '50%', transform: 'translateX(-50%)', bottom: '', right: '' },
  121. 'center-bottom': { bottom: '20px', left: '50%', transform: 'translateX(-50%)', top: '', right: '' },
  122. 'center': { top: '50%', left: '50%', transform: 'translate(-50%, -50%)', bottom: '', right: '' }
  123. };
  124.  
  125. const pos = positions[position] || positions['center-top'];
  126. Object.assign(notification.style, pos);
  127. }
  128.  
  129. setPosition();
  130.  
  131. // 显示提示框
  132. notification.style.display = 'block';
  133. notification.style.opacity = opacity;
  134.  
  135. // 关闭提示框的函数
  136. function closeNotification() {
  137. notification.style.opacity = '0';
  138. notification.style.transform += ' translateY(20px)';
  139. setTimeout(() => {
  140. notification.style.display = 'none';
  141. document.body.removeChild(notification);
  142. document.head.removeChild(style);
  143. }, 500);
  144. }
  145.  
  146. // 如果有关闭按钮,为其添加事件监听
  147. if (hasCloseButton) {
  148. const closeNotificationButton = document.getElementById('closeNotification');
  149. closeNotificationButton.addEventListener('click', closeNotification);
  150. }
  151.  
  152. // 判断是否需要自动关闭
  153. if (typeof autoClose === 'number') {
  154. setTimeout(closeNotification, autoClose * 1000);
  155. }
  156. }
  157.  
  158. // 示例调用
  159.  
  160. // 使用所有参数的调用方式
  161. // show_message({
  162. // message: '这是一个完全配置的提示框', // 提示框的内容
  163. // type: 'success', // 成功类型提示框
  164. // position: 'center', // 屏幕正中显示
  165. // opacity: 0.9, // 透明度为 0.9
  166. // autoClose: false, // 不自动关闭
  167. // });
  168.  
  169. // 自定义显示颜色
  170. // show_message({
  171. // message: "这是一个自定义样式的提示框",
  172. // type: {
  173. // backgroundColor: '#f0e68c', // 浅黄色背景
  174. // textColor: '#8b4513' // 深棕色文字
  175. // },
  176. // position: 'bottom-left', // 在屏幕左下角显示
  177. // opacity: 0.8, // 透明度为0.9
  178. // autoClose: 7 // 7秒后自动关闭
  179. // });
  180.  
  181. // 使用简单的字符串调用方式(默认配置)
  182. // show_message("已成功加载信息提示框功能");
  183. console.log("已成功加载信息提示框功能");
  184.  

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址