js modale Box schließen Funktion

Ich verwende w3school modalen Methode für modale Feld: http://www.w3schools.com/howto/howto_css_modals.asp js modale Box schließen Funktion

Eine Schicht funktioniert gut. Ich versuche, eine weitere Schicht oben drauf wie folgt hinzuzufügen:

<div id="modal" class="modal_class"><div class="modal_content"></div></div> 
    <div id="inner_modal" class="mc_innder"><div class="inner_modal_content"></div></div>

Nehmen wir zum Beispiel sagen, dass ich die Haupttaste angeklickt, die das erste modale Feld zeigt.

Innerhalb der modalen Box gibt es eine weitere Schaltfläche, die eine weitere Ebene darüber auslöst.

Jetzt gibt es zwei Schichten (1. Schicht: Z-Index von 1 und 2. Schicht von 2, so dass sie übereinander liegen).

Das Problem, das ich habe, ist die Schließfunktion:

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

Sobald die zweite Schicht durch einen Klick außerhalb des Inhalts (schwarzer Hintergrund) geschlossen ist, dann wird das Click-Ereignis der zweiten Schicht und der 1. gebunden Das Schließen von Ebenen funktioniert nicht.

Ich habe versucht, bestimmte Klick-Funktion für zwei IDs zu erstellen:

jQuery(document).on('click', '#modal', function (e) {

und

jQuery(document).on('click', '#inner_modal', function (e) {

Das Problem ist, dass, wenn ich die zweite Schaltfläche klicken (die innerhalb von #modal befindet), Es schließt die erste Ebene und öffnet die zweite Ebene.

Würde mir jemand helfen, wie man zwei Schichten bekommt?

Danke!

Quelle

2016-06-11 steve Kim

Ich denke, das ist das, was Sie wollen:

<!DOCTYPE html> 
<html> 
<head> 
<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, 

/*jc start edits*/ 
.close:focus { 
    color: #000; 
    text-decoration: none; 
    cursor: pointer; 
} 
.close2 { 
    color: #aaaaaa; 
    float: right; 
    font-size: 28px; 
    font-weight: bold; 
} 

.close2:hover, 
.close2:focus { 
    color: #000; 
    text-decoration: none; 
    cursor: pointer; 
} 
/*jc end edits*/ 

</style> 
</head> 
<body> 

<h2>Modal Example</h2> 

<!-- Trigger/Open The Modal --> 
<button id="myBtn">Open Modal</button> 

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

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


    <!--jc start edits--> 
    <button id="myBtn2">Open # 2 Modal</button> 
    <!--jc end edits--> 
    </div> 

</div> 

<!--jc start edits--> 
<!-- The Modal --> 
<div id="myModal2" class="modal"> 
    <!-- Modal #2 content --> 
    <div class="modal-content"> 
    <span class="close2">×</span> 
    <p>Some other text in the Modal..</p> 
    </div> 
</div> 
<!--jc end edits--> 

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

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

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

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

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

// When the user clicks anywhere outside of the modal, close it 
window.onclick = function(event) { 
    if (event.target == modal) { 
     modal.style.display = "none"; 
    } 
    if (event.target == modal2) { 
     modal2.style.display = "none"; // jc added 
    } 
} 
</script> 

</body> 
</html>

Ich habe gerade den ersten Schritt 3 "Try it yourself" Probe und es modifiziert. Jede Zeile, die ich hinzugefügt habe, gebe ich einen Kommentar, damit es leicht zu finden ist.

Für die Aufzeichnung, w3schools unterrichtet Sie einige wirklich schlechte Sachen, und ich würde nicht empfehlen, dass Sie tatsächlich diesen Code verwenden. Für den Anfang sollten Sie Bedenken trennen (Javascript in einer Datei, CSS in einer anderen Datei und HTML in noch einer anderen). Außerdem ist dieser Code nicht sehr skalierbar. Für jedes Modal, das Sie hinzufügen, müssen Sie ein paar Javascript hinzufügen. Sie sollten die Funktionen schreiben, um wiederverwendbar zu sein.

Alles in allem empfehle ich, eine andere Website zu finden, von der Sie lernen können.

Quelle

2016-06-11 23:03:17

js modale Box schließen Funktion

Antwort

Verwandte Themen