Greasy Fork is available in English.

弹窗

在当前页面展示一个弹窗

ეს სკრიპტი არ უნდა იყოს პირდაპირ დაინსტალირებული. ეს ბიბლიოთეკაა, სხვა სკრიპტებისთვის უნდა ჩართეთ მეტა-დირექტივაში // @require https://update.greasyfork.org/scripts/399879/792823/%E5%BC%B9%E7%AA%97.js.

  1. // ==UserScript==
  2. // @name 弹窗
  3. // @namespace http://tampermonkey.net/
  4. // @version 1.0.0.2
  5. // @match http://*/*
  6. // @description 在当前页面展示一个弹窗
  7. // @author YiJie
  8. // ==/UserScript==
  9.  
  10. (function() {
  11. 'use strict';
  12. const $ = {};
  13. function cssToObj(css) {
  14. var regex = /([\w-]*)\s*:\s*([^;]*)/g;
  15. var match, properties={};
  16. while(match=regex.exec(css)) properties[match[1]] = match[2].trim();
  17. return properties;
  18. }
  19. $.css = function(nodes, propertyName, propertyValue) {
  20. for (let i = 0; i < nodes.length; i++) {
  21. let node = nodes[i];
  22. if (typeof(propertyValue) === "undefined") {
  23. if(typeof(propertyName) === "String")
  24. return node.style.getPropertyValue(propertyName);
  25. else{
  26. const dictX = propertyName;
  27. for (let index0 in dictX) {
  28. node.style.setProperty(index0, dictX[index0]);
  29. }
  30. }
  31. } else {
  32. node.style.setProperty(propertyName, propertyValue);
  33. }
  34. }
  35. }
  36. $.create = function(htmlStr) {
  37. let tempNode = document.createElement('div');
  38. htmlStr = htmlStr.replace(/\t/g, "").replace(/\r/g, "").replace(/\n/g, "");
  39. tempNode.innerHTML = htmlStr;
  40. return tempNode.firstChild;
  41. }
  42. class Show {
  43. constructor() {
  44.  
  45. }
  46. generateWrapperMask(maskColor) {
  47. const mask = $.create('<div pw-class="WrapperMask"></div>');
  48. $.css([mask],cssToObj("\
  49. z-index:1000;\
  50. position:fixed;\
  51. top: 0;left: 0;\
  52. width: 100%;height: 100%;\
  53. background-color: rgba(255,255,255,0);\
  54. transition: 1s;\
  55. "));
  56. setTimeout(function() {
  57. $.css([mask],cssToObj("background-color: "+maskColor+";"));
  58. }, 100);
  59. document.body.appendChild(mask);
  60. return mask;
  61. }
  62. prompt(message, callback) {}
  63. alert(message, callback) {}
  64. message(message, callback) {}
  65. Content(message, callback) {}
  66. initHtmlFrame(options){
  67. const defaultOptions = {
  68. "maskColor": "rgba(0,0,0,.2)",
  69. "width": 800,
  70. "height": 600,
  71. "backgroundColor": "rgb(250,250,250)",
  72. };
  73. this.HtmlFrameOptions = Object.assign(
  74. defaultOptions,
  75. options,
  76. {},
  77. );
  78. return this.HtmlFrameOptions;
  79. }
  80. HtmlFrame(htmlNode, options, callback) {
  81. options = this.initHtmlFrame(options);
  82. const mask = this.generateWrapperMask(options.maskColor);
  83. const HtmlFrameContent = $.create('\
  84. <div pw-class="HtmlFrameContent">\
  85. <svg id="HtmlFrameContent-delete" width="48" height="48" t="1586302120721" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2132">\
  86. <path p-id="2133" fill="#ff5500" d="M572.16 512l183.466667-183.04a42.666667 42.666667 0 1 0-60.586667-60.586667L512 451.84l-183.04-183.466667a42.666667 42.666667 0 0 0-60.586667 60.586667l183.466667 183.04-183.466667 183.04a42.666667 42.666667 0 0 0 0 60.586667 42.666667 42.666667 0 0 0 60.586667 0l183.04-183.466667 183.04 183.466667a42.666667 42.666667 0 0 0 60.586667 0 42.666667 42.666667 0 0 0 0-60.586667z">\
  87. </path>\
  88. </svg>\
  89. </div>');
  90. $.css([HtmlFrameContent],cssToObj("\
  91. position: absolute;\
  92. top: -2000px;left: calc(50% - "+options.width/2+"px);\
  93. width: "+options.width+"px;height: "+options.height+"px;\
  94. border-radius: 20px;\
  95. box-shadow: 0 0 24px gray;\
  96. background-color: "+options.backgroundColor+";\
  97. transition: 1s;\
  98. "));
  99. $.css([HtmlFrameContent.querySelector('#HtmlFrameContent-delete')],cssToObj("\
  100. z-index: 1000;\
  101. position: absolute;\
  102. top: 0;right: 0;\
  103. "));
  104. setTimeout(function() {
  105. $.css([HtmlFrameContent],cssToObj("top: calc(50% - "+options.height/2+"px);"));
  106. }, 100);
  107. HtmlFrameContent.querySelector('#HtmlFrameContent-delete').onclick = function(){
  108. if(typeof(callback)==="function") callback();
  109. $.css([HtmlFrameContent],cssToObj("top: -2000px;"));
  110. $.css([mask],cssToObj("background-color: rgba(255, 255, 255, 0);"));
  111. setTimeout(function() {
  112. mask.remove();
  113. }, 1000);
  114. };
  115. if(htmlNode) HtmlFrameContent.appendChild(htmlNode);
  116. mask.appendChild(HtmlFrameContent);
  117. }
  118. }
  119. class PopupWindow {
  120. constructor() {
  121. this.__Init();
  122. }
  123. Init(options) {
  124. this.__Init(options);
  125. }
  126. __Init(options) {
  127. const defaultOptions = {
  128.  
  129. };
  130. this.options = options || defaultOptions;
  131. this.Show = new Show();
  132. }
  133. }
  134. window.PopupWindow = new PopupWindow();
  135. })();