Wie erstellt man mehrere Modale um verschiedene Daten anzuzeigen?

Ich versuche, mehrere Modale zu erstellen, um verschiedene Daten anzuzeigen. Ich habe mir andere Beispiele angeschaut (on stack overflow) und den Code implementiert und es funktioniert immer noch nicht für mich. Im Grunde möchte ich an dieser Stelle nur darauf hinarbeiten, dass es funktioniert und das Skript von der Webseite der WW3-Schulen kopiert hat. Ich habe zwei Beispiele ... eines mit nur einem Modal (das funktioniert) und dann das zweite mit zwei Modalen (die unterschiedliche Daten anzeigen sollen (das funktioniert nicht). Aber wenn ich das erste Modal lösche, funktioniert das zweite Modal die ganze Seite enthalten nur für den Fall seiner ein anderes Thema, Ive auch die Elemente inspiziert und seine sagen es keine Fehler ist. ich hoffe, dass Sie mir helfen können!Wie erstellt man mehrere Modale um verschiedene Daten anzuzeigen?

Erstes Beispiel mit einem modal (Werke).

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Modals</title> 
<style> 
/* The Modal (background) */ 
.modal { 
    display: none; /* Hidden by default */ 
    position: fixed; /* Stay in place */ 
    z-index: 1; /* 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: rgba(0,0,0,0.4); /* Black w/ opacity */ 
} 

/* Modal Content */ 
.modal-content { 
    background-color: #fefefe; 
    margin: auto; 
    padding: 20px; 
    border: 1px solid #888; 
    width: 80%; 
} 

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

.close:hover, 
.close:focus { 
    color: #000; 
    text-decoration: none; 
    cursor: pointer; 
} 
</style> 
</head> 
<body> 
<h2>Modal Example</h2> 

    <!-- Trigger/Open The Modal --> 
    <button id="myBtn" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1">Open Modal</button> 

    <!-- The Modal --> 
    <div id="myModal1" class="modal"> 

     <!-- Modal content --> 
     <div class="modal-content"> 
     <span class="close">×</span> 
     <p>Some text in the Modal..</p> 
     </div> 

    </div> 

    <script> 
    // Get the modal 
    var modal = document.getElementById('myModal1'); 

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

    // Get the <span> element that closes the modal 
    var span = document.getElementsByClassName("close")[0]; 

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



    </body> 
    </html>

Mein zweites Beispiel mit zwei Modalverben ist unten. (funktioniert nicht)

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Modals</title> 
<style> 
/* The Modal (background) */ 
.modal { 
    display: none; /* Hidden by default */ 
    position: fixed; /* Stay in place */ 
    z-index: 1; /* 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: rgba(0,0,0,0.4); /* Black w/ opacity */ 
} 

/* Modal Content */ 
.modal-content { 
    background-color: #fefefe; 
    margin: auto; 
    padding: 20px; 
    border: 1px solid #888; 
    width: 80%; 
} 

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

.close:hover, 
.close:focus { 
    color: #000; 
    text-decoration: none; 
    cursor: pointer; 
} 
</style> 
</head> 
<body> 

<h2>Modal Example</h2> 

<!-- Trigger/Open The Modal --> 
<button id="myBtn" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1">Open Modal</button> 

<!-- The Modal --> 
<div id="myModal1" class="modal"> 

    <!-- Modal content --> 
    <div class="modal-content"> 
    <span class="close">×</span> 
    <p>Some text in the Modal..</p> 
    </div> 

</div> 

<script> 
// Get the modal 
var modal = document.getElementById('myModal1'); 

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

// Get the <span> element that closes the modal 
var span = document.getElementsByClassName("close")[0]; 

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

    <h2>Modal Example 3</h2> 

<!-- Trigger/Open The Modal --> 
<button id="myBtn2" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">Open Modal</button> 

<!-- The Modal --> 
<div id="myModal2" class="modal"> 

    <!-- Modal content --> 
    <div class="modal-content"> 
    <span class="close">×</span> 
    <p>Some text in the Modal..</p> 
    </div> 

</div> 

<script> 
// Get the modal 
var modal = document.getElementById('myModal2'); 

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

// Get the <span> element that closes the modal 
var span = document.getElementsByClassName("close")[0]; 

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



</body> 
</html>

Quelle

2016-10-31 gjem

Sie überschreiben die Variablen (btn, modal) und das onlick-Ereignis, das Sie für das erste Modal definiert haben.

Sie können das Problem lösen, indem Sie die Variablen Ihres zweiten Modals umbenennen (z. B. modal2, btn2 usw.).

Auch sollten Sie die window.onclick Ereignis einmal und prüfen Sie für jede modale wie folgt definieren:

window.onclick = function(event) { 
    if (event.target == modal2) { 
     modal2.style.display = "none"; 
    } 
    if (event.target == modal) { 
     modal.style.display = "none"; 
    } 
}

Hier ist eine schnelle jsfiddle ist: https://jsfiddle.net/0yccvpng/

Quelle

2016-10-31 09:28:53 secelite

Thank you so much! Es hat mir wirklich geholfen, dies ist das erste Mal, dass ich modals benutze und ich bin noch in den frühen Phasen der Programmierung! – gjem

Wie erstellt man mehrere Modale um verschiedene Daten anzuzeigen?

Antwort

Verwandte Themen