Raw Source Toggle Dropdown

• Minified Source

-01 / THX Donate

// ==UserScript==
// @name         THX Donate
// @version      0.0.1
// @description  Bouton de donation de THX
// @author       -01
// @match        http://www.jeuxvideo.com/forums/42-*
// @require       http://code.jquery.com/jquery-3.3.1.min.js
// @require       https://cdn.jsdelivr.net/npm/clipboard@1/dist/clipboard.min.js
// @grant        none
// @license MIT
// ==/UserScript==

(function() {
    'use strict';

    $(".bloc-mp-pseudo").find("a").css("display","inline");
    var btnTHX = $("<button></button>").text("THX").css({
		"height": "14px",
		"margin-top": "12px",
		"font-size": "10px",
		"line-height": "0.2",
		"width": "30px",
		"padding-left": "6px",
		"padding-right": "25px",
    }).addClass("btn btn-thx");
    $(".bloc-mp-pseudo").append(btnTHX);



    /* Modal settings */
	var modal = document.createElement("div");
	modal.id = "modal-thx";
	modal.className = "modal-thx";
	modal.innerHTML = '<div class="modal-content"> <div class="modal-header"> <span class="close"> <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-close-128.png" height="30px" alt="close"> </span> <h2>THANKS Donation</h2> </div><div class="modal-body">Adresse THX du pseudo :<input id="addr-thx" value="[adresse de l\'auteur] "><button class="btn-thx" data-clipboard-target="#addr-thx"> <img src="https://clipboardjs.com/assets/images/clippy.svg" height="26px" alt="Copy to clipboard"></button></div></div>';
	document.body.appendChild(modal);
    new Clipboard('.btn-thx');
	/* CSS du modal */
	function addcss(css){
		var head = document.getElementsByTagName('head')[0];
		var s = document.createElement('style');
		s.setAttribute('type', 'text/css');
		if (s.styleSheet) {   // IE
			s.styleSheet.cssText = css;
		} else {
			s.appendChild(document.createTextNode(css));
		}
		head.appendChild(s);
	 }

	addcss(".modal-thx{display:none;position:fixed;z-index:1000;padding-top:100px;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:rgba(0,0,0,.4)}.modal-content{position:relative;background-color:white;margin:auto;padding:0;border:1px solid #888;width:80%;box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);-webkit-animation-name:animatetop;-webkit-animation-duration:.4s;animation-name:animatetop;animation-duration:.4s}.modal-body,.modal-header{padding:2px 16px}@-webkit-keyframes animatetop{from{opacity:0}to{opacity:1}}@keyframes animatetop{from{opacity:0}to{opacity:1}}.close{color:#fff;float:right;font-size:28px;font-weight:700}.close:focus,.close:hover{color:#000;text-decoration:none;cursor:pointer}.modal-header{background-color:#004466;color:#fff}");


	var modalTHX = document.getElementById('modal-thx');
	var span = document.getElementsByClassName("close")[0];

    $(".btn-thx").click(function(){
        modalTHX.style.display = "block";
        console.log("btn click");
    });

	span.onclick = function() {
		modal.style.display = "none";
	};
	window.onclick = function(event) {
		if (event.target == modal) {
			modal.style.display = "none";
		}
	};

	span.onclick = function() {
		modal.style.display = "none";
	};
	window.onclick = function(event) {
		if (event.target == modal) {
			modal.style.display = "none";
		}
	};


})();