script da applicare su più "id"

**Jacqui** · 23-10-2021, 08:41

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";  }}

**cavicchiandrea** · 23-10-2021, 12:25

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

**Jacqui** · 23-10-2021, 16:17

<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.

**ninja72** · 23-10-2021, 18:41

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>

**Jacqui** · 23-10-2021, 19:34

YES

si esatto.
Grazie mille.

Discussione: script da applicare su più "id"

Strumenti discussione

Ricerca discussione

Visualizza

script da applicare su più "id"

Permessi di invio