☰

Tiny Modal

Tiny Modal!

Tính đến 28-03-2024. Xem phiên bản mới nhất.

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';
    });
}