0
我試圖創建一個新的和獨特的模態每次我點擊其中一個div。問題是,當我點擊divs時,新的模式被創建,但不會像它應該打開。創建點擊模式
如果點擊其中一個div之前點擊該按鈕,默認模式將正常打開。
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">×</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";
});