pop-up und befüllen Bootstrap-modal mit Inhalt auf Bedingung

Question

Ich habe Bootstrap CDNs aufgerufen und ich versuche, das Modell mit Inhalt zu füllen und es zu aktivieren, unter der Bedingung, dass eine Zeichenfolge die Zeichenfolge auf der Seite gedruckt wird.

Ich kann es mit einer Alarm-Box arbeiten, kann es einfach nicht funktionieren mit Bootstrap Modal, kann jemand sehen, warum?

My-Code

<!-- 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--> 

UPDATE

Ich habe die Funktion einer

<button class="button next m2" id="next-button" onclick="populateModal()"> 
       Next 
      </button> 

aber jetzt bin ich immer diese Fehlermeldung

Taste verknüpft 0

Uncaught ReferenceError: populateModal is not defined at HTMLButtonElement.onclick (index.html:76)

Answer 1

Change This

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

Answer 2

Es gibt ein paar Probleme 1. Sie rufen nicht modal wie document.getElementById("modal-button").click(); Sie benötigen $("#myModal").modal(); 2. Sie haben haben Funktion Dokument reday so nicht schreiben Ihre var str da DOM undefiniert ist nicht geladen

Ich habe diese Probleme im folgenden Code behoben. Überprüfen Sie, ob es jetzt funktioniert.

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