Skip to content

Instantly share code, notes, and snippets.

@MatheusMuriel
Created November 4, 2020 16:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save MatheusMuriel/3635a652cb063603ed4d4e0c91d9bccf to your computer and use it in GitHub Desktop.
Save MatheusMuriel/3635a652cb063603ed4d4e0c91d9bccf to your computer and use it in GitHub Desktop.
Bookmarklet code for open a modal
javascript:(function(){
let tailwind = document.createElement('link');
tailwind.href = 'https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css';
tailwind.rel = 'stylesheet';
document.body.appendChild(tailwind);
let style = document.createElement('style');
style.appendChild( document.createTextNode(`
.modal {
opacity: 0;
visibility: hidden;
transition: visibility 0s lineaer 0.1s, opacity 0.3s ease;
}
.modal.open {
visibility: visible;
opacity: 1;
transition-delay: 0s;
}
`) );
document.head.appendChild(style);
let divContainer = document.createElement('div');
divContainer.classList = ['container mx-auto py-10'];
let divModal = document.createElement('div');
divModal.id = 'modal';
divModal.classList = ['modal open fixed pin p-30 w-100 h-100 m-0 z-20 mt-4'];
divModal.setAttribute('role', 'dialog');
let divModalOverlay = document.createElement('div');
divModalOverlay.classList = ['modal-overlay fixed pin z-10 bg-teal-dark'];
divModal.appendChild( divModalOverlay );
let divModalContainer = document.createElement('div');
divModalContainer.classList = ['modal-container relative bg-white rounded-lg shadow max-w-lg mx-auto p-16 z-30'];
divModalContainer.setAttribute('role', 'document');
let title = document.createElement('h3');
title.classList = ['font-sans text-2xl mb-2 text-teal-dark'];
title.appendChild( document.createTextNode('Welcome to a super modal') );
divModalContainer.appendChild( title );
let text = document.createElement('p');
text.classList = ['font-serif leading-normal mb-4'];
text.appendChild( document.createTextNode(`Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse hic quam velit fugiat ipsam,
quos atque ex aperiam repellendus sequi qui perspiciatis deserunt officia fugit adipisci,
consectetur veritatis, explicabo sit!`) );
divModalContainer.appendChild( text );
let button = document.createElement('button');
button.classList = ['modal-close absolute pin-t pin-r w-16 h-16'];
button.appendChild( document.createTextNode('Fechar') );
divModalContainer.appendChild( button );
divModal.appendChild( divModalContainer );
divContainer.appendChild( divModal );
document.body.insertBefore( divContainer, document.body.firstChild );
function setActionForCloseModal() {
let closeButtons = document.querySelectorAll('.modal-close');
let modalOverlays = document.querySelectorAll('.modal-overlay');
closeButtons.forEach( (button) => {
const modalWindow = button.parentNode.parentNode;
button.addEventListener('click', () => {
modalWindow.classList.remove('open');
});
});
modalOverlays.forEach( (overlay) => {
const modalWindow = overlay.parentNode;
overlay.addEventListener('click', () => {
modalWindow.classList.remove('open');
});
});
}
setActionForCloseModal();
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment