点击

时间：2017-04-18 14:59:19

标签： javascript jquery html css

每次点击其中一个div时，我都会尝试创建一个新的独特模态。问题是，当我点击div时，会创建新模态，但不会像它应该那样打开。

如果在单击其中一个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">&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";

});

1 个答案:

答案 0 :(得分：0)

从DOM树中删除#myModal并使用该ID创建新元素时，modal未更新，因此仍指向已删除的元素。

我建议您重新构建代码，如下所示：

  • 您将处理变量modal和span的所有内容移动到一个单独的函数中（我将其称为initModal）。
  • 您让initModal显示模态（即设置modal.style.display = 'block'）。
  • 您让initModal返回modal，以便在初始化后可以轻松应用背景色等自定义。
  • 您设置btn.onclick = initModal。

所有应用，你得到：

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

btn.onclick = initModal;

function initModal()
{
	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>

相关问题
最新问题