引导模态的Javascript变量

Question

有可能是一个简单的方法，但是我的谷歌目前使我失望了，希望我能在正确的方向上有所作为

我有一个HTML页面，基本上是一堆复选框。 这些复选框用于简单的自我评估“是/否”问卷，并根据问题以不同的值加权。

在调查表的末尾，您点击了计算结果，它使用了快速的Javascript函数来计算分数，并且Alert Popup会为您提供分数

我最近将页面迁移到Bootstrap 3并进行了一些清理，但想使用Modal弹出而不是旧式的Javascript警报

有没有一种简单的方法可以将javascript计算的变量从主页传递到Bootstrap Modal

谢谢

编辑

正确-解决了问题，正在调用JQUERY代码

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

从我的模型中-将代码段移至主要的javascript函数中，并且可以正常工作。 知道这将是一个简单的..我想可能是时候停止工作了

谢谢

Answer 1

是的。 您可以将变量传递给引导模态。

脚本文件

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

Answer 2

看一下文档 。 我相信您想要做的就是在您的按钮中添加data-toggle="modal"属性，然后使其生效，以便当它调用您的calculate函数时，它将通过Javascript更改模式中的内容。

模态只是普通的HTML，您可以将id分配给您想要的任何东西。 在这里，您可以使用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;
}

希望我理解你的问题。

Answer 3

Bootstrap模态不支持此功能。 但是你可以自己写？

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

所以单击计算结果看起来像这样。

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

Answer 4

正如Jahnux73所说（或意味着）的那样，该模式将在您希望它出现的同一页面中。 因此，在调用警报框的函数中，您只需要调用该模式即可。

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

（或者您也可以使用“显示”而不是切换），对于计算出的值……您只需将这些值添加到模态html中即可。 因此，只需获取元素。

output = document.getElementById('yourOutputTagId');

然后可以设置该输出对象的属性； 您需要innerHTML还是value属性（根据您的设计）。

设置所有必需值后，您可以通过上述功能调用模态。