Tiny Modal!
Tính đến
Script này sẽ không được không được cài đặt trực tiếp. Nó là một thư viện cho các script khác để bao gồm các chỉ thị meta
// @require https://update.greasyfork.org/scripts/491129/1350900/Tiny%20Modal.js
// ==UserScript==
// @name Tiny Modal
// @namespace http://tampermonkey.net/
// @version 2024-03-28
// @description Tiny Modal!
// @author NoLongerPure
// @icon https://www.google.com/s2/favicons?sz=64&domain=torn.com
// ==/UserScript==
function createModal(content) {
const modalWrapper = document.createElement('div');
modalWrapper.id = 'tmModalWrapper';
modalWrapper.innerHTML = `
<div id="tmModal">
<div id="tmModalHeader">
<span id="tmModalCloseBtn">×</span>
</div>
<div id="tmModalContent">
${content}
</div>
</div>
`;
document.body.appendChild(modalWrapper);
// Style for modal
const modalStyle = `
#tmModalWrapper {
position: fixed;
top: 50px;
left: 50px;
z-index: 9999;
}
#tmModal {
border: 1px solid #ccc;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
max-width: 200px;
}
#tmModalHeader {
background-color: #f0f0f0;
padding: 8px;
border-bottom: 1px solid #ccc;
cursor: move;
}
#tmModalContent {
padding: 16px;
}
#tmModalCloseBtn {
cursor: pointer;
float: right;
font-size: 20px;
}
`;
GM_addStyle(modalStyle);
// Make modal movable
const modal = document.getElementById('tmModalWrapper');
const modalHeader = document.getElementById('tmModalHeader');
let isDragging = false;
let offsetX, offsetY;
modalHeader.addEventListener('mousedown', startDragging);
modalHeader.addEventListener('mouseup', stopDragging);
function startDragging(e) {
isDragging = true;
offsetX = e.clientX - modal.offsetLeft;
offsetY = e.clientY - modal.offsetTop;
document.addEventListener('mousemove', dragModal);
}
function stopDragging() {
isDragging = false;
document.removeEventListener('mousemove', dragModal);
}
function dragModal(e) {
if (isDragging) {
const newX = e.clientX - offsetX;
const newY = e.clientY - offsetY;
modal.style.left = `${newX}px`;
modal.style.top = `${newY}px`;
}
}
// Close modal when close button is clicked
const closeBtn = document.getElementById('tmModalCloseBtn');
closeBtn.addEventListener('click', () => {
modal.style.display = 'none';
});
}