jquery - Javascript Variable to Bootstrap Modal

Question

Got what is probably a simple one, but my google is failing me at the moment so hoping i can get a bit of a push in the right direction

I have a HTML page that is basically a bunch of checkboxes. These checkboxes are for simple self evaluation yes/no questionnaire that are weighted with different values based on the questions.

At the end of the questionnaire, you hit calculate results and it used a quick Javascript function to calculate the score and an Alert Popup give you the score

I recently migrated the page to Bootstrap 3 and cleaned it up a bit but want to use a Modal to popup instead of the old style Javascript alert

Is there a simple way of passing the javascript calculated variable from the main page to a Bootstrap Modal

Thanks

EDIT

Right - Worked it out, was calling the JQUERY code

$('#myResults').html(counter);

From within my Model - moved the snippet into the main javascript function and it works. Knew it was going to be a simple one.. Might be time to stop working i think

Thanks

Answer 1

Yes . You can pass variable to bootstrap modal.

Script file

     <script>
 function testFun(variable){

document.getElementById('testH1').innerHTML=variable;
}
</script>

HTML

<button class="btn btn-primary btn-lg" onclick="testFun('testId')" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <h1 id="testH1"></h1>
      </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>