我调用了引导 CDN,我正在尝试用内容填充模型,并在字符串与页面上打印的字符串匹配的情况下使其处于活动状态。
我可以让它与警报框一起工作,只是无法让它与 Bootstrap Modal 一起工作,任何人都可以看到为什么吗?
我的代码
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!--End Modal-->
<!--BODY CONTENT-->
<div class="columns">
<div class="column-left">
<div id="question-number" class="question-text">Question 2 of 40</div>
<div id="question-time" class="question-time"></div>
</div>
</div>
<!--END BODY CONTENT-->
<!--SCRIPT TO POP OPEN MODEL-->
<script>
function populateModal() {
var str = $('#question-number').html();
if (str.indexOf("Question 2 of 40") !== -1) {
var body = $('.modal-body').find('.col-md-8')
$('.modal-title').html("title here");
$(body).html("content here");
document.getElementById("modal-button").click();
}
}
</script>
<!--END SCRIPT-->
更新
我已将该功能链接到一个按钮
<button class="button next m2" id="next-button" onclick="populateModal()">
Next
</button>
但现在我收到此错误
未捕获的引用错误:未定义填充模态 at HTMLButtonElement.onclick (index.html:76)
有几个问题1.你不会像document.getElementById("modal-button").click();
那样称呼模态你需要写$("#myModal").modal();
2. 您没有文档 reday 函数,因此您的 var str 未定义,因为未加载 DOM
我已经在下面的代码中修复了这些问题。检查它现在是否正常工作。
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!--End Modal-->
<!--BODY CONTENT-->
<div class="columns">
<div class="column-left">
<div id="question-number" class="question-text">Question 2 of 40</div>
<div id="question-time" class="question-time"></div>
</div>
</div>
<!--END BODY CONTENT-->
$(document).ready(function(){
function populateModal() {
var str = $('#question-number').html();
if (str.indexOf("Question 2 of 40") !== -1) {
var body = $('.modal-body').find('.col-md-8')
$('.modal-title').html("title here");
$(body).html("content here");
$("#myModal").modal();
}
}
populateModal();
});
更改此内容
// Edit this instead of document.getElementById("modal-button").click();
$("#myModal").modal('show');
function populateModal() {
var str = $('#question-number').html();
if (str.indexOf("Question 2 of 40") !== -1) {
var body = $('.modal-body').find('.col-md-8')
$('.modal-title').html("title here");
$(body).html("content here");
$("#myModal").modal();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!--End Modal-->
<!--BODY CONTENT-->
<div class="columns">
<div class="column-left">
<div id="question-number" class="question-text">Question 2 of 40</div>
<div id="question-time" class="question-time"></div>
</div>
</div>
<button class="button next m2" id="next-button" onclick="populateModal()">
Next
</button>