☰

MyTips

操作成功/失败提示框，样式仿bootstrap

此脚本不应直接安装，它是一个供其他脚本使用的外部库。如果您需要使用该库，请在脚本元属性加入：// @require https://update.cn-greasyfork.org/scripts/411517/851635/MyTips.js 

  1. // ==UserScript==
  2. // @name         MyTips
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1.2
  5. // @description  操作成功/失败提示框，样式仿bootstrap
  6. // @author       Wilson
  7. // ==/UserScript==
  8.  
  9. ((w) => {
  10.     document.body.insertAdjacentHTML('beforeend', `
  11. <style>
  12.     #__g_sucess_tips, #__g_error_tips{
  13.         display:none;position:fixed;z-index:88889999;top:20%;left:50%;margin-left:-150px;margin-top:-20px;width:300px;height:40px;padding: 0.75rem 1.25rem;
  14.         padding:0 8px;line-height:40px;height:40px;font-size:16px;text-align:center;border-radius: 0.25rem;border: 1px solid transparent;
  15.     }
  16.     #__g_sucess_tips{background-color:#d4edda;border-color:#c3e6cb;color:#155724;}
  17.     #__g_error_tips{background-color:#f8d7da;border-color:#f5c6cb;color:#721c24;}
  18. </style>
  19. <div id="__g_sucess_tips"></div>
  20. <div id="__g_error_tips"></div>
  21. `);
  22.     var MyTips = {};
  23.     var __id=function(name){return document.getElementById(name)};
  24.     var __show_tips = function(_id, str, delay, pos, area){
  25.         _id=__id(_id)||_id;
  26.         _id.innerHTML=str;
  27.         if(pos && pos.left){
  28.             _id.style.left = pos.left + 'px';
  29.             _id.style.marginLeft="auto";
  30.         }
  31.         if(pos && pos.top){
  32.             _id.style.top = pos.top + 'px';
  33.             _id.style.marginTop="auto";
  34.         }
  35.         if(area && area.width){
  36.             _id.style.width = area.width + 'px';
  37.             if(!pos || !pos.left)_id.style.marginLeft="-"+(area.width/2)+"px";
  38.         }
  39.         if(area && area.height){
  40.             _id.style.height = area.height + 'px';
  41.             _id.style.lineHeight = area.height + 'px';
  42.             if(!pos || !pos.top)_id.style.marginTop="-"+(area.height/2 * 0.1)+"px";
  43.         }
  44.         _id.style.display='block';
  45.         setTimeout(function(){_id.style.display='none';}, delay||3000);
  46.     };
  47.     MyTips.sucessTips = function(str, delay, pos, area){
  48.         return __show_tips("__g_sucess_tips", str, delay, pos, area);
  49.     };
  50.     MyTips.errorTips = function(str, delay, pos, area){
  51.         return __show_tips("__g_error_tips", str, delay, pos, area);
  52.     };
  53.     w.MyTips = MyTips;
  54. })(this);
  55.  
  56. //使用示例
  57. //MyTips.sucessTips("执行成功");
  58. //MyTips.errorTips("执行失败");
  59. //MyTips.errorTips("执行失败", 30000, {left:10}, {width:500});