Erstellen von Mods bei Klick

Question

Ich versuche jedes Mal, wenn ich auf eines der divs klicke, ein neues und einzigartiges Modal zu erstellen. Das Problem ist, dass wenn ich in die Divs klicke, das neue Modal erstellt wird, aber nicht wie es sollte.

Wenn ich auf die Schaltfläche klicke, bevor ich auf eines der divs klicke, wird das Standardmodal normal geöffnet.

HTML

<div class="destaque1">Gráfico 1</div> 
<div class="destaque2">Gráfico 2</div> 
<div class="destaque3">Gráfico 3</div> 
<div class="destaque4">Gráfico 4</div> 

<button id="myBtn">Open Modal</button> 

<div id="myModal" class="modal"> 
    <div class="modal-content"> 
     <span class="close">&times;</span> 
     <p>Some text in the Modal..</p> 
    </div> 
</div> 

CSS

.modal { 
    display: none; 
    position: fixed; 
    z-index: 1; 
    padding-top: 100px; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4); 
} 

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

.close { 
    color: #aaaaaa; 
    float: right; 
    font-size: 28px; 
    font-weight: bold; 
} 

.close:hover, 
.close:focus { 
    color: #000; 
    text-decoration: none; 
    cursor: pointer; 
} 

SCRIPT

var modal = document.getElementById('myModal'); 

var btn = document.getElementById("myBtn"); 

var span = document.getElementsByClassName("close")[0]; 

btn.onclick = function() { 
    modal.style.display = "block"; 
} 

span.onclick = function() { 
    modal.style.display = "none"; 
    $('#myModal').remove(); 
    $('.modal-content').remove(); 
    $('.close').remove(); 
} 

window.onclick = function(event) { 
    if (event.target == modal) { 
     modal.style.display = "none"; 
     $('#myModal').remove(); 
     $('.modal-content').remove(); 
     $('.close').remove(); 
    } 
} 

$('.destaque1').click(function(){ 

    $('#myModal').remove(); 
    $('.modal-content').remove(); 
    $('.close').remove(); 

    var divModal = document.createElement('div'); 
    divModal.id = "myModal"; 
    divModal.className = "modal"; 

    var divModalContent = document.createElement('div'); 
    divModalContent.className = "modal-content"; 

    var spanClose = document.createElement('span'); 
    spanClose.className = "close"; 

    var t = document.createTextNode("times;"); 
    spanClose.appendChild(t); 

    document.body.appendChild(divModal); 
    divModal.appendChild(divModalContent); 
    divModalContent.appendChild(spanClose); 

    modal.style.display = "block"; 
    modal.style.backgroundColor = "red"; 

}); 

$('.destaque2').click(function(){ 

    $('#myModal').remove(); 
    $('.modal-content').remove(); 
    $('.close').remove(); 

    var divModal = document.createElement('div'); 
    divModal.id = "myModal"; 
    divModal.className = "modal"; 

    var divModalContent = document.createElement('div'); 
    divModalContent.className = "modal-content"; 

    var spanClose = document.createElement('span'); 
    spanClose.className = "close"; 

    var t = document.createTextNode("times;"); 
    spanClose.appendChild(t); 

    document.body.appendChild(divModal); 
    divModal.appendChild(divModalContent); 
    divModalContent.appendChild(spanClose); 

    modal.style.display = "block"; 
    modal.style.backgroundColor = "blue"; 

}); 

$('.destaque3').click(function(){ 

    $('#myModal').remove(); 
    $('.modal-content').remove(); 
    $('.close').remove(); 

    var divModal = document.createElement('div'); 
    divModal.id = "myModal"; 
    divModal.className = "modal"; 

    var divModalContent = document.createElement('div'); 
    divModalContent.className = "modal-content"; 

    var spanClose = document.createElement('span'); 
    spanClose.className = "close"; 

    var t = document.createTextNode("times;"); 
    spanClose.appendChild(t); 

    document.body.appendChild(divModal); 
    divModal.appendChild(divModalContent); 
    divModalContent.appendChild(spanClose); 

    modal.style.display = "block"; 
    modal.style.backgroundColor = "green"; 

}); 

$('.destaque4').click(function(){ 

    $('#myModal').remove(); 
    $('.modal-content').remove(); 
    $('.close').remove(); 

    var divModal = document.createElement('div'); 
    divModal.id = "myModal"; 
    divModal.className = "modal"; 

    var divModalContent = document.createElement('div'); 
    divModalContent.className = "modal-content"; 

    var spanClose = document.createElement('span'); 
    spanClose.className = "close"; 

    var t = document.createTextNode("times;"); 
    spanClose.appendChild(t); 

    document.body.appendChild(divModal); 
    divModal.appendChild(divModalContent); 
    divModalContent.appendChild(spanClose); 

    modal.style.display = "block"; 
    modal.style.backgroundColor = "yellow"; 

}); 

Answer 1

Wenn Sieentfernen 210 aus der DOM-Baumstruktur und erstellen Sie ein neues Element mit dieser ID. Ihre modal wird nicht aktualisiert und zeigt daher immer noch auf das entfernte Element.

Ich schlage vor, Sie Ihren Code neu strukturieren wie folgt:

• Sie alles bewegen, die mit den Variablen beschäftigt modal und span in eine separate Funktion (ich nenne es initModal).
• Sie machen zeigen das modale (d. H. Set modal.style.display = 'block').
• Sie machen geben Sie die modal, so dass Anpassungen wie Hintergrundfarbe kann leicht nach der Initialisierung angewendet werden.
• Sie setzen btn.onclick = initModal.

Alles, was angewendet wird, erhalten Sie:

var btn = document.getElementById("myBtn"); 
 

 
btn.onclick = initModal; 
 

 
function initModal() 
 
{ 
 
\t var modal = document.getElementById('myModal'); 
 
    var span = document.getElementsByClassName("close")[0]; 
 

 
    span.onclick = function() { 
 
     modal.style.display = "none"; 
 
     $('#myModal').remove(); 
 
     $('.modal-content').remove(); 
 
     $('.close').remove(); 
 
    } 
 
    
 
    window.onclick = function(event) { 
 
     if (event.target == modal) { 
 
      modal.style.display = "none"; 
 
      $('#myModal').remove(); 
 
      $('.modal-content').remove(); 
 
      $('.close').remove(); 
 
     } 
 
    } 
 
    
 
    modal.style.display = "block"; 
 
    return modal; 
 
} 
 

 
$('.destaque1').click(function(){ 
 

 
    $('#myModal').remove(); 
 
    $('.modal-content').remove(); 
 
    $('.close').remove(); 
 

 
    var divModal = document.createElement('div'); 
 
    divModal.id = "myModal"; 
 
    divModal.className = "modal"; 
 

 
    var divModalContent = document.createElement('div'); 
 
    divModalContent.className = "modal-content"; 
 

 
    var spanClose = document.createElement('span'); 
 
    spanClose.className = "close"; 
 

 
    var t = document.createTextNode("times;"); 
 
    spanClose.appendChild(t); 
 

 
    document.body.appendChild(divModal); 
 
    divModal.appendChild(divModalContent); 
 
    divModalContent.appendChild(spanClose); 
 

 
    initModal().style.backgroundColor = "red"; 
 
}); 
 

 
$('.destaque2').click(function(){ 
 

 
    $('#myModal').remove(); 
 
    $('.modal-content').remove(); 
 
    $('.close').remove(); 
 

 
    var divModal = document.createElement('div'); 
 
    divModal.id = "myModal"; 
 
    divModal.className = "modal"; 
 

 
    var divModalContent = document.createElement('div'); 
 
    divModalContent.className = "modal-content"; 
 

 
    var spanClose = document.createElement('span'); 
 
    spanClose.className = "close"; 
 

 
    var t = document.createTextNode("times;"); 
 
    spanClose.appendChild(t); 
 

 
    document.body.appendChild(divModal); 
 
    divModal.appendChild(divModalContent); 
 
    divModalContent.appendChild(spanClose); 
 

 
    initModal().style.backgroundColor = "blue"; 
 
}); 
 

 
$('.destaque3').click(function(){ 
 

 
    $('#myModal').remove(); 
 
    $('.modal-content').remove(); 
 
    $('.close').remove(); 
 

 
    var divModal = document.createElement('div'); 
 
    divModal.id = "myModal"; 
 
    divModal.className = "modal"; 
 

 
    var divModalContent = document.createElement('div'); 
 
    divModalContent.className = "modal-content"; 
 

 
    var spanClose = document.createElement('span'); 
 
    spanClose.className = "close"; 
 

 
    var t = document.createTextNode("times;"); 
 
    spanClose.appendChild(t); 
 

 
    document.body.appendChild(divModal); 
 
    divModal.appendChild(divModalContent); 
 
    divModalContent.appendChild(spanClose); 
 

 
    initModal().style.backgroundColor = "green"; 
 
}); 
 

 
$('.destaque4').click(function(){ 
 

 
    $('#myModal').remove(); 
 
    $('.modal-content').remove(); 
 
    $('.close').remove(); 
 

 
    var divModal = document.createElement('div'); 
 
    divModal.id = "myModal"; 
 
    divModal.className = "modal"; 
 

 
    var divModalContent = document.createElement('div'); 
 
    divModalContent.className = "modal-content"; 
 

 
    var spanClose = document.createElement('span'); 
 
    spanClose.className = "close"; 
 

 
    var t = document.createTextNode("times;"); 
 
    spanClose.appendChild(t); 
 

 
    document.body.appendChild(divModal); 
 
    divModal.appendChild(divModalContent); 
 
    divModalContent.appendChild(spanClose); 
 

 
    initModal().style.backgroundColor = "yellow"; 
 
});

.modal { 
 
    display: none; 
 
    position: fixed; 
 
    z-index: 1; 
 
    padding-top: 100px; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: auto; 
 
    background-color: rgb(0,0,0); 
 
    background-color: rgba(0,0,0,0.4); 
 
} 
 

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

 
.close { 
 
    color: #aaaaaa; 
 
    float: right; 
 
    font-size: 28px; 
 
    font-weight: bold; 
 
} 
 

 
.close:hover, 
 
.close:focus { 
 
    color: #000; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="destaque1">Gráfico 1</div> 
 
<div class="destaque2">Gráfico 2</div> 
 
<div class="destaque3">Gráfico 3</div> 
 
<div class="destaque4">Gráfico 4</div> 
 

 
<button id="myBtn">Open Modal</button> 
 

 
<div id="myModal" class="modal"> 
 
    <div class="modal-content"> 
 
     <span class="close">&times;</span> 
 
     <p>Some text in the Modal..</p> 
 
    </div> 
 
</div>