Javascript: Έχω πολλούς κουμπί ενεργοποίησης σε μια σελίδα, αλλά όλα πυροδοτούν την τελευταία περίπτωση

ψήφοι
0

Έχω μια ιστοσελίδα με πολλά κουμπιά. Αυτά τα κουμπιά προκαλέσει μια τροπική με περιεχόμενο σε αυτό. Κάθε πλήκτρο σχετίζεται με μια μοναδική τροπική με μοναδικό περιεχόμενο σε αυτό.

Το πρόβλημα είναι, κάθε πλήκτρο ενεργοποιεί την τροπική σχετίζονται με το τελευταίο κουμπί στο κάτω μέρος της σελίδας.

Κάθε κουμπί και modal έχουν μια μοναδική ταυτότητα, οπότε δεν μπορώ να καταλάβω γιατί συμβαίνει αυτό.

Εδώ είναι ο κώδικας που χρησιμοποιείται για τη δημιουργία κάθε ένα από αυτά τα κουμπιά.

Σας ευχαριστώ για τη βοήθειά σας!

// JS CODE FOR THE FIRST MODAL 

// Get the modal
var modal = document.getElementById('modal-1');

// Get the button that opens the modal
var btn = document.getElementById(button-1);

// Get the <span> element that closes the modal
var span = document.getElementById(close-1);

// When the user clicks the button, open the modal 
btn.onclick = function() {
    modal.style.display = block;
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = none;
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = none;
    }
}
// When the user press ESC key, close the modal
window.onkeydown = function( event ) {
    if ( event.keyCode == 27 ) {
        modal.style.display = none;
    }
};
// JS CODE FOR THE SECOND MODAL 

// Get the modal
var modal = document.getElementById('modal-2');

// Get the button that opens the modal
var btn = document.getElementById(button-2);

// Get the <span> element that closes the modal
var span = document.getElementById(close-2);

// When the user clicks the button, open the modal 
btn.onclick = function() {
    modal.style.display = block;
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = none;
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = none;
    }
}
// When the user press ESC key, close the modal
window.onkeydown = function( event ) {
    if ( event.keyCode == 27 ) {
        modal.style.display = none;
    }
};
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1001; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgb(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    margin: auto;
    padding: auto;
    width: 60%;
}

/* The Close Button */
.close {
    color: white; 
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
<!-- Trigger/Open The Modal #1 -->
<a id=button-1>Modal #1</a>

<!-- The Modal -->
<div id=modal-1 class=modal>

  <!-- Modal content -->
  <div class=modal-content>
    <span id=close-1 class=close>&times;</span>
    <p>I'm the text of the first modal</p>
  </div>

</div>
<!-- Trigger/Open The Modal #2 -->
<a id=button-2>Modal #2</a>

<!-- The Modal -->
<div id=modal-2 class=modal>

  <!-- Modal content -->
  <div class=modal-content>
    <span id=close-2 class=close>&times;</span>
    <p>I'm the text of the second modal</p>
  </div>

</div>

Δημοσιεύθηκε 27/11/2018 στις 17:37
πηγή χρήστη
Σε άλλες γλώσσες...                            


2 απαντήσεις

ψήφοι
1

Δεν είναι επειδή σας λείπει για να προσθέσετε κάποια stopPropagation εκδήλωση;

(Και νομίζω ότι είναι μια κακή ιδέα να αναφέρουμε JS vaviable «άνοιγμα», αυτό το όνομα της ετικέτας html)

και θα πρέπει με να είναι πιο σαφής στον κώδικα σχετικά με αυτόν τον τρόπο (ίδια εκδήλωση αρκετών στοιχείων)

    var ActionCloseID = ['modal', 'button', 'close'];
    document.onclick = function(e) {
        if (ActionCloseID.includes(e.target.id) ) {
            e.stopPropagation();                  
            modal.style.display = "none";
        }
    }

Απαντήθηκε 27/11/2018 στις 18:09
πηγή χρήστη

ψήφοι
0

<script>
// JS CODE FOR THE FIRST MODAL

// Get the modal
var modal = document.getElementById('modal-1');

// Get the button that opens the modal
var btn = document.getElementById("button-1");

// Get the <span> element that closes the modal
var span = document.getElementById("close-1");

// Get the modal
var modal2 = document.getElementById('modal-2');

// Get the button that opens the modal
var btn2 = document.getElementById("button-2");

// Get the <span> element that closes the modal
var span2 = document.getElementById("close-2");

// When the user clicks the button, open the modal
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }else if (event.target == modal2) {
        modal2.style.display = "none";
    }
}
// When the user press ESC key, close the modal
window.onkeydown = function( event ) {
    if ( event.keyCode == 27 ) {
        modal.style.display = "none";
        modal2.style.display = "none";
    }
};

// When the user clicks the button, open the modal
btn2.onclick = function() {
    modal2.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span2.onclick = function() {
    modal2.style.display = "none";
}

Παρακαλείστε να ενημερώσετε το σενάριο σαν αυτό, αυτό θα πρέπει να εργαστεί.

Απαντήθηκε 28/11/2018 στις 14:17
πηγή χρήστη

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more