☰

mtoast

toast

当前为 2023-09-25 提交的版本，查看 最新版本。

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

  1. // ==UserScript==
  2. // @name        mtoast
  3. // @version     0.1.0
  4. // @author      gortik
  5. // @description toast
  6. // ==/UserScript==
  7.  
  8. var mtoast = {
  9. 	css: `
  10. 		.mtoast {
  11.  
  12. 			/* (B) DIMENSION */
  13. 			//width: 200px;
  14. 			padding: 10px;
  15.  
  16. 			/* (C) COLORS */
  17. 			border: 1px solid #c52828;
  18. 			background: #ffebe1;
  19. 			border: 1px solid #000;
  20.  
  21. 			border-radius: 5px;
  22. 			margin-bottom: 20px;
  23. 		}
  24.  
  25. 		.mtoast.show {
  26. 			display:block
  27. 		}
  28.  
  29. 		#mtoast-holder {
  30. 			position: fixed;
  31. 			z-index: 999;
  32. 			right: 20px;
  33. 			top: 50px;
  34. 			width: 200px;
  35. 			display: flex;
  36. 			flex-direction: column;
  37. 		}
  38.  
  39. 		.fade-in {
  40. 			animation: fadeIn linear .8s;
  41. 		}
  42.  
  43. 		.fade-out {
  44. 			animation: fadeOut linear .5s;
  45. 		}
  46. 		@keyframes fadeIn {
  47. 			0% {
  48. 				opacity: 0;
  49. 				max-height: 0px;
  50. 			}
  51.  
  52. 			100% {
  53. 				opacity: 1;
  54. 				max-height: 100px;
  55. 			}
  56. 		}
  57.  
  58. 		@keyframes fadeOut {
  59. 			0% {
  60. 				opacity: 1;
  61. 				max-height: 100px;
  62. 			}
  63. 			100% {
  64. 				opacity: 0;
  65. 				max-height: 0;
  66. 			}
  67. 		}
  68. 	`,
  69. 	container: null,
  70.  
  71. 	addCSStyle: (styleText) => {
  72. 		let style = document.createElement('style');
  73. 		style.type = 'text/css';
  74. 		document.head.appendChild(style);
  75. 		style.appendChild(document.createTextNode(styleText));
  76. 	},
  77.  
  78. 	init: () => {
  79. 		mtoast.addCSStyle(mtoast.css);
  80. 		let container = document.createElement('div');
  81. 		container.setAttribute('id', 'mtoast-holder');
  82. 		document.body.insertAdjacentElement('afterbegin', container);
  83. 		mtoast.container = container;
  84. 		console.log( 'mtoast loaded' );
  85. 	},
  86.  
  87.  
  88. 	removeMToast: (e) => {
  89. 		e.target.classList.add('fade-out');
  90. 		setTimeout(() => e.target.remove(), 500);
  91. 	},
  92.  
  93. 	createMToast: () => {
  94. 		let toast = document.createElement('div');
  95. 		toast.classList.add('mtoast');
  96. 		toast.classList.add('fade-in');
  97. 		mtoast.container.insertAdjacentElement('afterbegin', toast);
  98. 		return toast;
  99. 	},
  100.  
  101. 	msg: (msg) => {
  102. 		if (!mtoast.container) {
  103. 			toast.init();
  104. 		}
  105. 		let toast = mtoast.createMToast();
  106. 		console.log(msg);
  107. 		toast.innerHTML = msg;
  108. 		toast.classList.add('show');
  109. 		toast.addEventListener('click', mtoast.removeMToast);
  110. 	}
  111. }
  112.  
  113. mtoast.init()
  114.

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

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