Question

我试图通过ajax调用显示来自其他部分页面的用户数据，其中包含每个用户的模态。 Modal工作正常，但是当它们通过ajax插入时，按钮甚至不会触发它们。我无法提供完整的代码，但这里是示例

<button class="modal-btn" data-modal="view">VIEW</button>

<div id="view" class="modal">
  <div class="modal-content col border-radius">
    <h4 class="p-x-6 p-y-5 m-2">View</h4>
  </div>
</div>


.modal {
  display: none;
  position: fixed;
  z-index: 999999;
  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 {
  position: fixed;
  top: 5%;
  left: 10%;
  right: 10%;
  background-color: #fefefe;
  padding: 0;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  animation-name: animatetop;
  animation-duration: 0.5s;
  z-index: 999999;
}

@keyframes animatetop {
  0% {
    transform: translateY(-100%);
  }
  50% {
    transform: translateY(8%);
  }
  65% {
    transform: translateY(6%);
  }
  80% {
    transform: translateY(4%);
  }
  95% {
    transform: translateY(2%);
  }
  100% {
    transform: translateY(0%);
  }
}

(function iife() {
  "use strict";



    function closestEl(el, selector) {
        var doc = el.document ||
          el.ownerDocument;
        var matches = doc.querySelectorAll(selector);
        var i;
        while (el) {
          i = matches.length - 1;
          while (i >=
            0) {
            if (matches.item(i) === el) {
              return el;
            }
            i -= 1;
          }
          el = el.parentElement;
        }
        return el;
      }
      var modalBtns = document.querySelectorAll(".modal-btn");
      modalBtns.forEach(function addBtnClickEvent(btn) {
        btn.onclick = function showModal() {
          var modal = btn.getAttribute("data-modal");
          document.getElementById(modal).style.display = "block";
        };
      });
      window.onclick = function closeOnClick(event) {
        if (event.target.className === "modal") {
          event.target.style.display = "none";
        }
      };
    }());

从部分页面重新启动时，有没有办法让它工作？

Answer 1

首先插入工作正常吗？对？当你通过ajax追加新的模态时发生这种情况。他们有相同的id="view"。所以javascript无法获得elementById的情况下有超过1个唯一ID ...解决方案是，在您添加新模态时，为它们提供唯一ID ...

<button class="modal-btn" data-modal="{UNIQUE_ID_}">VIEW</button>

<div id="{UNIQUE_ID_}" class="modal">
  <div class="modal-content col border-radius">
  <h4 class="p-x-6 p-y-5 m-2">View</h4>
  </div>
</div>

通过ajax调用插入模态不起作用

1 个答案: