我会在同一页面上有大约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个段落。我需要能够使用样式和标签对每个样式进行样式和格式化。
答案 0 :(得分:0)
我会创建一个模态元素,然后根据这样的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对象。