Javascript Variable To Bootstrap Modal

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

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

Solution 2:

Take a look at the documentation. I believe what you are going to want to do is add a data-toggle="modal" attribute to your calculate button and then make it so when it calls your calculate function, it changes the content in the modal via Javascript.

The modal is just normal HTML and you can assign ids to whatever you want. From there you can edit it with innerHTML

<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Calculate</a>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <h3 id="myModalLabel"></h3>
  </div>
</div>

Javascript

function calculate() {
    //do some calculation and store it in a variable
    var a = b + c; 
    document.getElementById("myModalLabel").innerHTML = "The final calculation is" + a;
}

Hope I understood your question.

Solution 3:

Bootstrap modal doesn't support this functionality. But you could write your own?

function showModal(score){
  $('#myModal .score').html(score);
  $('#myModal').modal('show')
}

so clicking the calculate results what look something like this.

$('#buttonCalcResults').click(function(){
  var score = foo+bar+whatever
  showModal(score);
})

Solution 4:

As Jahnux73 already said (or meant) that the modal will be in the same page, where you want it to appear. So in the function where you are calling an alert box you just have to call that modal.

 $('#yourModalId').modal('toggle');

(or you can also use 'show' instead of toggle) And for the calculated values...you just need to add these values to the html of modal. So just get the element.

output = document.getElementById('yourOutputTagId');

and then you can set the properties of that output object; either you want innerHTML or value attribute (according to your design.)

After setting all the required value you call your modal by the function mentioned above.