Javascript变量到Bootstrap模态

得到的可能是一个简单的，但我的谷歌目前让我失望，所以希望我能在正确的方向上有所推动

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

在调查问卷的最后，你点击计算结果，它使用一个快速的Javascript函数来计算得分，一个警报弹出窗口给你的分数

我最近将页面迁移到Bootstrap 3并稍微清理了一下但是想要使用Modal弹出而不是旧式Javascript警报

是否有一种简单的方法将javascript计算变量从主页传递到Bootstrap模式

谢谢

编辑

对 – 完成了它，正在调用JQUERY代码

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

从我的模型中 – 将代码段移动到主要的javascript函数中并且它可以工作。 知道这将是一个简单的..我想是时候停止工作了

谢谢

Answer 1

是的 您可以将变量传递给bootstrap模式。

脚本文件

HTML

  Launch demo modal  
 
 
 
 × 
Modal title
 
 
 
 
 
 Close Save changes 
 
 
  

Answer 2

看一下文档 。 我相信你想要做的是在你的计算按钮中添加一个data-toggle="modal"属性，然后当它调用你的calculate函数时，它会通过Javascript更改模态中的内容。

模态只是普通的HTML，您可以将ID分配给您想要的任何内容。 从那里你可以用innerHTML编辑它

  Calculate  
 
 
 
  

使用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。 但你可以写自己的吗？

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

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

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

Answer 4

正如Jahnux73已经说过（或意味着）模态将在同一页面中，您希望它出现在哪里。 因此，在您调用警报框的function中，您只需调用该模态即可。

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

（或者您也可以使用’show’而不是切换）并且对于计算值…您只需要将这些值添加到模态的html中。 所以只需获得元素。

 output = document.getElementById('yourOutputTagId'); 

然后你可以设置输出对象的属性; 你想要innerHTML还是value属性（根据你的设计。）

设置完所有需要的值后，您可以通过上述function调用模态。