Creé una librería con la clase Modal para crear una ventanita en la página.
var modal = new Modal();
modal.create(`<div class="modal-content">
<h1>My Modal</h1>
<p>Some text</p>
</div>`);
unsafeWindow.modal = modal; // Para acceder desde la consola
Por ahora requiere que se declaren los estilos de forma externa a la clase:
GM_addStyle(`#${modal.id} {
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
/* background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
*/
}
/* Modal Content/Box */
#${modal.id} .modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
#${modal.id} .close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
#${modal.id} .close:hover,
#${modal.id} .close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}`);
Creé una librería con la clase Modal para crear una ventanita en la página.
Por ahora requiere que se declaren los estilos de forma externa a la clase:
Y para abrir el modal: