Javascript 多模态一个脚本

我会在同一个页面上有大约40个不同的modal，而不是每个modal都有一个scrip行，我正在尝试创建一种使用一个脚本来运行整个过程的方法。从一次显示一个的代码开始，但我尝试重新处理它，以便在单击链接时更新代码并显示正确的模式

我在这里找到了其他人，但似乎没有回答为什么我的不起作用。我是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";
  }
}

var model=“”，
lnk=“”，
lnkNumb=“”，
modalID=“”，
lnkID=“”，
span=document.getElementsByClassName（“关闭”）[0]；
$（'class^=“lnk”]'）。在（'click'，函数（e）{
e、 预防默认值（）；
lnkNumb=this.className.replace（'lnk'，''）；
lnkID=（'lnk'+lnkNumb）；
lnk=document.getElementById（lnkID）；
modalID=（'modal'+lnkNumb）；
modal=document.getElementById（modalID）；
});
//当用户单击该链接时，打开模式对话框
lnk.onclick=函数（）{
modal.style.display=“块”；
}
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal.style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}

---

我将在模式中显示的内容将至少有一个标题，以及下面1到6段的任何地方。我需要能够使用样式和标记对它们中的每一个进行样式设置和格式化。

我将创建一个模态元素，然后基于类似这样的JSON对象动态填充其内容（CSS可以保持不变）。单击链接时，“.modal btn”click侦听器将获取该链接的数据模式id属性，然后使用该属性访问“modalData”JSON对象及其相关数据：

HTML:

---

如果您想要一个基于外部API的JSON数据的模式，那么JSON对象也可以通过AJAX调用来获取。

代码是否会接受HTML代码，因为我会将其放入标题中？在当前的站点防火墙中，拉一些外部的东西不是一个选项。是的，它可以很好地处理标题，只需确保在插入这些脚本之前将jQuery链接放在标记中，因为我的Javascript依赖于它（我认为这是可以的，因为它存在于您的小提琴中）。这不起作用，从标题到段落：例如：

B12Sequi nam Concertetur veritatis cumque tenetur Architector to quasi-obcaecati！这是一个非常好的例子，它是一个非常好的例子！Sequi nam Concertetur Veriatis cumque tenetur Architect to quasi-obcaecati！这是一个非常好的例子，它是一个非常好的例子
 

我只是将标题作为示例放在模态中，向您展示如何访问和填充模态中的元素。你到底想干什么？您可能需要调整我的Javascript以访问正确的元素，我主要是为您设置一个模板来引用并查看它是如何工作的。你在模型里面有什么？一个标题和一个段落？这就是我的JSON所做的。根据您单击的链接，它会发现JSON对象以及获取这些值的“header”和“body”键。顺便说一句，@UltimateNoob、JSON中的“header”和“body”节点可能有误导性。这些是指模态本身的标题和主体元素。。。它们只是用来填充模态中的文本值。它们与实际的HTML页面标题不同，即

。我的Javascript和HTML应该完全取代您当前的Javascript和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>

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();
});