☰

Tiny Modal

Tiny Modal

当前为 2024-03-28 提交的版本，查看 最新版本。

此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.cn-greasyfork.org/scripts/491129/1350904/Tiny%20Modal.js 

  1. // ==UserScript==
  2. // @name         Tiny Modal
  3. // @namespace    http://tampermonkey.net/
  4. // @version      2024-03-28
  5. // @description  Tiny Modal
  6. // @author       NoLongerPure
  7. // @match        https://www.torn.com/*
  8. // @icon         https://www.google.com/s2/favicons?sz=64&domain=torn.com
  9. // @grant        GM_addStyle
  10. // ==/UserScript==
  11.  
  12. function createModal(content) {
  13.     const modalWrapper = document.createElement('div');
  14.     modalWrapper.id = 'tmModalWrapper';
  15.     modalWrapper.innerHTML = `
  16.         <div id="tmModal">
  17.             <div id="tmModalHeader">
  18.                 <span id="tmModalCloseBtn">×</span>
  19.             </div>
  20.             <div id="tmModalContent">
  21.                 ${content}
  22.             </div>
  23.         </div>
  24.     `;
  25.     document.body.appendChild(modalWrapper);
  26.  
  27.     // Style for modal
  28.     const modalStyle = `
  29.         #tmModalWrapper {
  30.             position: fixed;
  31.             top: 50px;
  32.             left: 50px;
  33.             z-index: 9999;
  34.         }
  35.         #tmModal {
  36.             border: 1px solid #ccc;
  37.             background-color: #fff;
  38.             border-radius: 5px;
  39.             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  40.             max-width: 200px;
  41.         }
  42.         #tmModalHeader {
  43.             background-color: #f0f0f0;
  44.             padding: 8px;
  45.             border-bottom: 1px solid #ccc;
  46.             cursor: move;
  47.         }
  48.         #tmModalContent {
  49.             padding: 16px;
  50.         }
  51.         #tmModalCloseBtn {
  52.             cursor: pointer;
  53.             float: right;
  54.             font-size: 20px;
  55.         }
  56.     `;
  57.     GM_addStyle(modalStyle);
  58.  
  59.     // Make modal movable
  60.     const modal = document.getElementById('tmModalWrapper');
  61.     const modalHeader = document.getElementById('tmModalHeader');
  62.     let isDragging = false;
  63.     let offsetX, offsetY;
  64.     let modalWidth = modal.offsetWidth;
  65.     let modalHeight = modal.offsetHeight;
  66.     let windowWidth = window.innerWidth;
  67.     let windowHeight = window.innerHeight;
  68.  
  69.     modalHeader.addEventListener('mousedown', startDragging);
  70.     modalHeader.addEventListener('mouseup', stopDragging);
  71.  
  72.     function startDragging(e) {
  73.         isDragging = true;
  74.         offsetX = e.clientX - modal.offsetLeft;
  75.         offsetY = e.clientY - modal.offsetTop;
  76.         document.addEventListener('mousemove', dragModal);
  77.     }
  78.  
  79.     function stopDragging() {
  80.         isDragging = false;
  81.         document.removeEventListener('mousemove', dragModal);
  82.     }
  83.  
  84.     function dragModal(e) {
  85.         if (isDragging) {
  86.             let newX = e.clientX - offsetX;
  87.             let newY = e.clientY - offsetY;
  88.  
  89.             // Check if modal reaches the edges
  90.             if (newX < 0) {
  91.                 newX = 0;
  92.             } else if (newX + modalWidth > windowWidth) {
  93.                 newX = windowWidth - modalWidth;
  94.             }
  95.  
  96.             if (newY < 0) {
  97.                 newY = 0;
  98.             } else if (newY + modalHeight > windowHeight) {
  99.                 newY = windowHeight - modalHeight;
  100.             }
  101.  
  102.             modal.style.left = `${newX}px`;
  103.             modal.style.top = `${newY}px`;
  104.         }
  105.     }
  106.  
  107.     // Close modal when close button is clicked
  108.     const closeBtn = document.getElementById('tmModalCloseBtn');
  109.     closeBtn.addEventListener('click', () => {
  110.         modal.style.display = 'none';
  111.     });
  112. }