Question

我已经调用了Bootstrap 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">&times;</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>

但现在我收到此错误

未捕获的ReferenceError：未定义populateModal 在HTMLButtonElement.onclick（index.html：76）

Answer 1

有一些问题 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">&times;</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();
});

Answer 2

更改此

// Edit this instead of document.getElementById("modal-button").click();
$("#myModal").modal('show');

＆＃13;

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

＆＃13;

<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">&times;</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>

＆＃13;

弹出并填充带有条件内容的Bootstrap模态

2 个答案: