Question

我会在同一页面上有大约40个不同的Modals，而不是每个都有一个脚本行，我试图创建一种方法来使用一个脚本来运行整个事情。开始使用的代码一次只能显示一个，但我尝试重新工作，以便在单击链接时，它会更新代码并显示正确的模态。

我在这里找到了其他人，但似乎没有回答为什么我的工作不起作用。我是JavaScript的新手，所以任何帮助都表示赞赏。

  var modal = "",
  lnk = "",
  lnkNumb = "",
  modalID = "",
  lnkID = "",
  span = document.getElementsByClassName("close")[0];

$('[class^="lnk"]').on('click', function(e) {
  e.preventDefault();
  lnkNumb = this.className.replace('lnk', '');
  lnkID = ('lnk' + lnkNumb);
  lnk = document.getElementById(lnkID);
  modalID = ('modal' + lnkNumb);
  modal = document.getElementById(modalID);
});

// When the user clicks the Link, open the modal 
lnk.onclick = function() {
  modal.style.display = "block";
}

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

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

我将在Modal中显示的内容至少有一个标题，下面有1到6个段落。我需要能够使用样式和标签对每个样式进行样式和格式化。

Answer 1

我会创建一个模态元素，然后根据这样的JSON对象动态填充它的内容（CSS可以保持不变）。单击链接时，'。modal-btn'单击侦听器获取该链接的data-modal-id属性，然后使用该属性访问'modalData'JSON对象及其相关数据：

HTML：

<a id="btnB12" class="modal-btn" data-modal-id="B12" href="#">B12</a>
<a id="btnB02" class="modal-btn" data-modal-id="B02" href="#">B02</a>


<!-- single modal -->
<div class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">×</span>
    <h2 class="modal-header"></h2>
    <p class="modal-body"></p>
  </div>
</div>

JS：

var modalData = {
  "B12": {
    "header":"Modal B12",
    "body":"Here's the text for Modal B12"
  },
  "B02": {
    "header":"Modal B02",
    "body":"Here's the text for Modal B02"
  }
}

//open modal
$('.modal-btn').on('click', function(e) {
  e.preventDefault();
  var modalId = $(e.currentTarget).data('modal-id');
  $('.modal-header').text(modalData[modalId].header);
  $('.modal-body').text(modalData[modalId].body);
  $('.modal').show();
});

//close modal
$('.close').on('click', function(e){
    $('.modal').hide();
});

如果你想要一个可能基于外部API的JSON数据的模态，也可以通过AJAX调用获得JSON对象。

多个模态一个脚本

1 个答案: