mostro al centro mailgo
This commit is contained in:
parent
a9b0b7d675
commit
4da60fd1c5
|
@ -2,12 +2,22 @@
|
|||
let mailgos = document.querySelectorAll('a[href^="mailto:"]:not(.no-mailgo)');
|
||||
|
||||
let styles = `
|
||||
.mailgo-modal-container {
|
||||
background: white;
|
||||
color:red;
|
||||
.mailgo-modal {
|
||||
position:fixed;
|
||||
top:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
left:0;
|
||||
display:none;
|
||||
}
|
||||
.mailgo-modal.is-active {
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
}
|
||||
`;
|
||||
|
||||
// CSS
|
||||
let styleSheet = document.createElement("style");
|
||||
styleSheet.type = "text/css";
|
||||
styleSheet.innerText = styles;
|
||||
|
@ -16,27 +26,29 @@ document.head.appendChild(styleSheet);
|
|||
console.log("mailgo is WIP!");
|
||||
|
||||
// attivo mailgo su tutti gli elementi
|
||||
mailgos.forEach(mailgo => {
|
||||
let modalContainer = document.createElement("div");
|
||||
modalContainer.className = "mailgo-modal-container";
|
||||
mailgos.forEach((mailgo, index) => {
|
||||
let modal = document.createElement("div");
|
||||
modal.className = "mailgo-modal";
|
||||
modal.id = "mailgo-modal-" + index;
|
||||
|
||||
modalContainer.appendChild(modal);
|
||||
|
||||
let modalContent = document.createTextNode("mailgo");
|
||||
let modalContent = document.createElement("div");
|
||||
modalContent.className = "mailgo-modal-content";
|
||||
|
||||
modal.appendChild(modalContent);
|
||||
|
||||
modalContainer.style.display = "none";
|
||||
mailgo.parentNode.insertBefore(modalContainer, mailgo.nextSibling);
|
||||
let text = document.createTextNode("mailgo");
|
||||
modalContent.appendChild(text);
|
||||
|
||||
mailgo.parentNode.insertBefore(modal, mailgo.nextSibling);
|
||||
|
||||
mailgo.addEventListener(
|
||||
"click",
|
||||
event => {
|
||||
// blocco l'esecuzione normale del mailto:
|
||||
event.preventDefault();
|
||||
mailgo.nextElementSibling.style.display = "block";
|
||||
|
||||
// setto il modal come attivo
|
||||
mailgo.nextElementSibling.classList.add("is-active");
|
||||
},
|
||||
false
|
||||
);
|
||||
|
|
|
@ -2,12 +2,22 @@
|
|||
let mailgos = document.querySelectorAll('a[href^="mailto:"]:not(.no-mailgo)');
|
||||
|
||||
let styles = `
|
||||
.mailgo-modal-container {
|
||||
background: white;
|
||||
color:red;
|
||||
.mailgo-modal {
|
||||
position:fixed;
|
||||
top:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
left:0;
|
||||
display:none;
|
||||
}
|
||||
.mailgo-modal.is-active {
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
}
|
||||
`;
|
||||
|
||||
// CSS
|
||||
let styleSheet = document.createElement("style");
|
||||
styleSheet.type = "text/css";
|
||||
styleSheet.innerText = styles;
|
||||
|
@ -16,27 +26,29 @@ document.head.appendChild(styleSheet);
|
|||
console.log("mailgo is WIP!");
|
||||
|
||||
// attivo mailgo su tutti gli elementi
|
||||
mailgos.forEach(mailgo => {
|
||||
let modalContainer = document.createElement("div");
|
||||
modalContainer.className = "mailgo-modal-container";
|
||||
mailgos.forEach((mailgo, index) => {
|
||||
let modal = document.createElement("div");
|
||||
modal.className = "mailgo-modal";
|
||||
modal.id = "mailgo-modal-" + index;
|
||||
|
||||
modalContainer.appendChild(modal);
|
||||
|
||||
let modalContent = document.createTextNode("mailgo");
|
||||
let modalContent = document.createElement("div");
|
||||
modalContent.className = "mailgo-modal-content";
|
||||
|
||||
modal.appendChild(modalContent);
|
||||
|
||||
modalContainer.style.display = "none";
|
||||
mailgo.parentNode.insertBefore(modalContainer, mailgo.nextSibling);
|
||||
let text = document.createTextNode("mailgo");
|
||||
modalContent.appendChild(text);
|
||||
|
||||
mailgo.parentNode.insertBefore(modal, mailgo.nextSibling);
|
||||
|
||||
mailgo.addEventListener(
|
||||
"click",
|
||||
event => {
|
||||
// blocco l'esecuzione normale del mailto:
|
||||
event.preventDefault();
|
||||
mailgo.nextElementSibling.style.display = "block";
|
||||
|
||||
// setto il modal come attivo
|
||||
mailgo.nextElementSibling.classList.add("is-active");
|
||||
},
|
||||
false
|
||||
);
|
||||
|
|
Loading…
Reference in New Issue