Topic: popup userscripts suggestion - page 2. (Read 716 times)

// ==UserScript==
// @name         Edit History
// @namespace    https://bitcointalk.org/
// @version      0.1
// @description  bitcointalk edit history pop up
// @author       0x256
// @include      https://bitcointalk.org/index.php?topic=*
// @grant        GM_addStyle

// ==/UserScript==

(function() {
    'use strict';
    /* edit_history_min style (css) */
    GM_addStyle(".modal{background-color:#fff;z-index:10;position:fixed;top:20%;left:16.5%;width:70vw;border-radius:5px}.modal-header{position:relative}.modal-header,.modal-body{padding:10px}.modal-header > h3{margin:0}.modal-close{cursor:pointer;padding:10px 20px;display:inline-block;position:absolute;top:0;right:0;opacity:0.8}.modal-close:hover{opacity:1}.modal-body{background:#ECEDF3}.modal-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#000;opacity:.3}");


// Get the button that opens the modal
let myBtn = document.querySelectorAll(".edited");

Array.from(myBtn).forEach((element) => {
    element.addEventListener('click', creatModal );
    console.log(element);
});

/** open the modal */
// When the user clicks the date, create and open the modal
function creatModal() {

    /* create modal after myBtn */
    this.insertAdjacentHTML('afterend', `
    
    `);

    // Get the modal
    let modal = document.getElementsByClassName("modal")[0];

    // Get the element that closes the modal
    let modalClose = document.getElementsByClassName("modal-close")[0];

    // Get the modal-backdrop
    let modalBackdrop = document.getElementsByClassName("modal-backdrop")[0];


    /** close the modal */
    // When the user clicks on (x), close the modal
    modalClose.onclick = function() {
        modal.remove();
        modalBackdrop.remove();
    }

    // When the user clicks anywhere outside of the modal, close it
    modalBackdrop.onclick = function(event) {
        if (event.target == modalBackdrop) {
            modal.remove();
            modalBackdrop.remove();
        }
    }
}


    
})();