Visualizzazione dei risultati da 1 a 5 su 5
  1. #1

    script da applicare su più "id"

    Buongiorno

    Ho il seguente script da applicare a più id.
    Ho modo ricavare il valore di modal in modo "dinamico"?
    Sulla base del pop up aperto?
    Grazie

    codice HTML:
    var modal = document.getElementById('id02');
    window.onclick = function(event) {  if (event.target == modal) {    modal.style.display = "none";  }}

  2. #2
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,110
    Si ma dovrai passare id alla funzioni che aprono il modal e che aprono la popup. La strada più semplice è eseguirlo lato server essendo id saranno record che mostri inserendo un click con id per la popup idem per la modale. Spero d’aver spiegato il concetto
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  3. #3
    <img onclick="document.getElementById('id02').style.dis play='block'">
    <img onclick="document.getElementById('id03').style.dis play='block'">
    ...
    <div id="id02" >
    <div id="id03" >
    <div id="id01" >

    Per ogni IMG richiamo modal diversi.
    Mi server trasferire alla variabile modal il valore dell'id cosi da chiudere il modal relativo cliccando sullo schermo.
    Cosi da avere una sola funzione di chiusura.

  4. #4
    Utente di HTML.it L'avatar di ninja72
    Registrato dal
    May 2020
    residenza
    -
    Messaggi
    220
    Intendevi una cosa del genere ?

    codice:
    <!DOCTYPE html>
    <html lang="it-IT">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                box-sizing: border-box;
                margin: 0;
                padding: 0;
            }
    
            html,
            body {
                height: 100vh;
            }
    
            #container {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100%;
            }
    
            #container .image {
                margin: 10px;
                cursor: pointer;
            }
    
            .modal {
                width: 100%;
                height: 100%;
                justify-content: center;
                align-items: center;
                position: absolute;
                display: none;
                background-color: rgba(0, 0, 0, 0.5);
                border: 1px solid red;
                padding: 10px;
                cursor: pointer;
            }
        </style>
    
    </head>
    
    <body>
        <div id="container">
            <img class="image" src="./images/01.jpg" alt="img1">
            <img class="image" src="./images/02.jpg" alt="img2">
            <img class="image" src="./images/03.jpg" alt="img3">
    
            <div class="modal">modal-01</div>
            <div class="modal">modal-02</div>
            <div class="modal">modal-03</div>
        </div>
    
        <script>
            const images = document.getElementsByClassName('image')
            const modals = document.getElementsByClassName('modal')
            let tmpModalIdx = null
    
            Array.from(images).forEach((e, idx) => {
                function openModal() {
                    tmpModalIdx === null
                        ? tmpModalIdx = idx
                        : Array.from(modals)[tmpModalIdx].style.display = 'none'
    
                    tmpModalIdx = idx
                    currentModal = Array.from(modals)[idx]
                    Array.from(modals)[idx].style.display = 'flex'
                }
                e.addEventListener('click', openModal)
            })
    
            Array.from(modals).forEach(e => {
                function closeModal(e) {
                    e.target.style.display = 'none'
                }
                e.addEventListener('click', closeModal)
            })
    
        </script>
    
    </body>
    
    </html>

  5. #5
    YES

    si esatto.
    Grazie mille.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.