modal share checkbox

assets/css/components/_modal-share.scss

@@ -117,4 +117,19 @@
         }
     }
    
+}
+
+
+// Action
+
+#share-banner{ display: none; }
+#share-banner ~ .modal--share{
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity .2s ease-in;
+}
+
+#share-banner:checked ~ .modal--share{
+    opacity: 1;
+    pointer-events: auto;
 }

assets/css/style.css

@@ -582,6 +582,21 @@ button:disabled {
   background-color: var(--color-accent);
 }
 
+#share-banner {
+  display: none;
+}
+
+#share-banner ~ .modal--share {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease-in;
+}
+
+#share-banner:checked ~ .modal--share {
+  opacity: 1;
+  pointer-events: auto;
+}
+
 [data-template=subscription-newsletter] .p__baseline-big,
 [data-template=thanks] .p__baseline-big,
 [data-template=support] .p__baseline-big,
@@ -1003,9 +1018,11 @@ body main {
   align-items: center;
   gap: calc(var(--spacing) * 0.25);
 }
-.page-enquete #banner--page .btn--group > button {
+.page-enquete #banner--page .btn--group > button,
+.page-enquete #banner--page .btn--group > label {
   width: 100%;
   max-width: 160px;
+  cursor: pointer;
 }
 .page-enquete #nav--page ul {
   list-style: none;

assets/css/template/_page-enquete.scss

@@ -100,9 +100,11 @@
         gap: calc(var(--spacing)*0.25);
 
         
-        > button{
+        > button,
+        > label {
             width: 100%;
             max-width: 160px;
+            cursor: pointer;
         }
         
     }

assets/js/share.js

@@ -1,7 +1,6 @@
 export function copyLink() {
     let buttons = document.querySelectorAll('.copy-link button');
     buttons.forEach(function (button, index) {
-        console.log(button);
         let link = button.parentNode.querySelector("input").value;
 
         button.addEventListener('click', function() {
@@ -16,4 +15,9 @@ export function copyLink() {
             });
         });
     });
-}
+}
+
+
+export function shareModal() {
+    let buttons = document.querySelectorAll('.btn__share');
+}

page-enquete/index.html

@@ -42,9 +42,13 @@
 
                 <div class="btn--group">
                     <button class="btn--bold"><a href="#">Lire le rapport</a></button>
-                    <button class="btn--bold-inline no-link">Partager</button>
+                    <label for="share-banner" class="btn--bold-inline no-link">Partager</label>
-                    <div class="modal--share" w3-include-html="/components/modal-share.html"></div>
                 </div>
+
+                <input type="checkbox" id="share-banner">
+                <div class="modal--share"  w3-include-html="/components/modal-share.html"></div>
+
+
             </div>