From 110f9c6de3bd319e5ebf71cec1477182e28c281e Mon Sep 17 00:00:00 2001 From: Matteo Manzinello Date: Fri, 3 May 2019 12:58:59 +0200 Subject: [PATCH] nascondo il modal al clic fuori --- dist/mailgo.js | 20 +++++++++++++++----- dist/mailgo.min.js | 2 +- src/mailgo.js | 20 +++++++++++++++----- 3 files changed, 31 insertions(+), 11 deletions(-) diff --git a/dist/mailgo.js b/dist/mailgo.js index a4ebd2a..3906cdf 100644 --- a/dist/mailgo.js +++ b/dist/mailgo.js @@ -8,7 +8,7 @@ let styles = ` right: 0; bottom: 0; left: 0; - background-color: black; + background-color: rgba(10,10,10,.86); opacity: 0.8; } .mailgo-modal { @@ -26,10 +26,12 @@ let styles = ` } .mailgo-modal-content { z-index: 1000; - border-radius: 8px; - background: white; - padding: 24px; - margin: 24px; + background-color: #fff; + border-radius: 6px; + box-shadow: 0 2px 3px rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.1); + color: #4a4a4a; + display: block; + padding: 1.25rem; } `; @@ -71,4 +73,12 @@ mailgos.forEach((mailgo, index) => { }, false ); + + modalBackground.addEventListener( + "click", + event => { + mailgo.nextElementSibling.classList.remove("is-active"); + }, + false + ); }); diff --git a/dist/mailgo.min.js b/dist/mailgo.min.js index 1fb4e33..b6d0674 100644 --- a/dist/mailgo.min.js +++ b/dist/mailgo.min.js @@ -1 +1 @@ -let mailgos=document.querySelectorAll('a[href^="mailto:"]:not(.no-mailgo)'),styles="\n .mailgo-modal-background {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: black;\n opacity: 0.8;\n }\n .mailgo-modal {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n display: none;\n }\n .mailgo-modal.is-active {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n .mailgo-modal-content {\n z-index: 1000;\n border-radius: 8px;\n background: white;\n padding: 24px;\n margin: 24px;\n }\n",styleSheet=document.createElement("style");styleSheet.type="text/css",styleSheet.innerText=styles,document.head.appendChild(styleSheet),console.log("mailgo is WIP!"),mailgos.forEach((e,n)=>{let t=document.createElement("div");t.className="mailgo-modal",t.id="mailgo-modal-"+n;let l=document.createElement("div");l.className="mailgo-modal-background",t.appendChild(l);let o=document.createElement("div");o.className="mailgo-modal-content",t.appendChild(o);let a=document.createTextNode("mailgo");o.appendChild(a),e.parentNode.insertBefore(t,e.nextSibling),e.addEventListener("click",n=>{n.preventDefault(),e.nextElementSibling.classList.add("is-active")},!1)}); \ No newline at end of file +let mailgos=document.querySelectorAll('a[href^="mailto:"]:not(.no-mailgo)'),styles="\n .mailgo-modal-background {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: rgba(10,10,10,.86);\n opacity: 0.8;\n }\n .mailgo-modal {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n display: none;\n }\n .mailgo-modal.is-active {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n .mailgo-modal-content {\n z-index: 1000;\n background-color: #fff;\n border-radius: 6px;\n box-shadow: 0 2px 3px rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.1);\n color: #4a4a4a;\n display: block;\n padding: 1.25rem;\n }\n",styleSheet=document.createElement("style");styleSheet.type="text/css",styleSheet.innerText=styles,document.head.appendChild(styleSheet),console.log("mailgo is WIP!"),mailgos.forEach((e,n)=>{let t=document.createElement("div");t.className="mailgo-modal",t.id="mailgo-modal-"+n;let l=document.createElement("div");l.className="mailgo-modal-background",t.appendChild(l);let o=document.createElement("div");o.className="mailgo-modal-content",t.appendChild(o);let a=document.createTextNode("mailgo");o.appendChild(a),e.parentNode.insertBefore(t,e.nextSibling),e.addEventListener("click",n=>{n.preventDefault(),e.nextElementSibling.classList.add("is-active")},!1),l.addEventListener("click",n=>{e.nextElementSibling.classList.remove("is-active")},!1)}); \ No newline at end of file diff --git a/src/mailgo.js b/src/mailgo.js index a4ebd2a..3906cdf 100644 --- a/src/mailgo.js +++ b/src/mailgo.js @@ -8,7 +8,7 @@ let styles = ` right: 0; bottom: 0; left: 0; - background-color: black; + background-color: rgba(10,10,10,.86); opacity: 0.8; } .mailgo-modal { @@ -26,10 +26,12 @@ let styles = ` } .mailgo-modal-content { z-index: 1000; - border-radius: 8px; - background: white; - padding: 24px; - margin: 24px; + background-color: #fff; + border-radius: 6px; + box-shadow: 0 2px 3px rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.1); + color: #4a4a4a; + display: block; + padding: 1.25rem; } `; @@ -71,4 +73,12 @@ mailgos.forEach((mailgo, index) => { }, false ); + + modalBackground.addEventListener( + "click", + event => { + mailgo.nextElementSibling.classList.remove("is-active"); + }, + false + ); });