这是我的html(模态)
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"></h4>
</div>
<div id="modal-text" class="modal-body">
<p id="modalMessage"> </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
这是我的jQuery
$('a[href="#myModal"]').click(function () {
if ($("#TermsConditions")) {
$("#modal-title").html(`<h4>` + "Terms Conditions" + `</h4>`);
$("#modalMessage").html(`<p>` + "message" + `</p>`);
}
else if ($("#Cookies")) {
$("#modal-title").html(`<h4>` + "Cookies" + `</h4>`);
$("#modalMessage").html(`<p>` + "message2" + `</p>`);
}
else {
$("#modal-title").html(`<h4>` + "Privacy Policy" + `</h4>`);
$("#modalMessage").html(`<p>` + "message3" + `</p>`);
}
})
点击链接时应该打开模式 当我点击时,模态应显示所选链接的一些标题和文字(id) 它看起来就像那样(图片)
它只是写了错误&#34;消息&#34; ...
这是我的链接代码
<ul class="list-unstyled list-inline gray">
<li class="footerDistance" style="display:inline;"><a data-target="#myModal" data-toggle="modal" href="#myModal" id="TermsConditions">Terms&Conditions</a></li>
<li class="footerDistance" style="display:inline;"><a data-target="#myModal" data-toggle="modal" href="#myModal" id="Cookies">Політика Cookies</a></li>
<li class="footerDistance" style="display:inline;"><a data-target="#myModal" data-toggle="modal" href="#myModal" id="PrivacyPolicy">Політика Конфіденційності</a></li>
</ul>
请帮忙!
答案 0 :(得分:2)
做得更简单。
{{1}}
答案 1 :(得分:0)
您正在尝试通过ID&#34; modal-tile&#34;来获取元素。但是在你的html中没有带有id&#34; modal-title&#34;
的元素$("#modal-title").html(`<h4>` + "Privacy Policy" + `</h4>`);
<h4 class="modal-title"></h4>
我认为您需要将代码更改为
<h4 class="modal-title" id="modal-title"></h4>
此外,您可以更改点击方法:
$('a[href="#myModal"]').click(function () {
var clickedAnchorId = $(this).attr('id');
if (clickedAnchorId === "TermsConditions") {
$("#modal-title").html(`<h4>` + "Terms Conditions" + `</h4>`);
$("#modalMessage").html(`<p>` + "message" + `</p>`);
}
else if (clickedAnchorId === "Cookies") {
$("#modal-title").html(`<h4>` + "Cookies" + `</h4>`);
$("#modalMessage").html(`<p>` + "message2" + `</p>`);
}
else {
$("#modal-title").html(`<h4>` + "Privacy Policy" + `</h4>`);
$("#modalMessage").html(`<p>` + "message3" + `</p>`);
}
})