Question

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

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

在调查问卷的最后，您点击计算结果并使用快速Javascript函数计算得分，并且警报弹出窗口为您提供分数

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

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

由于

修改

正确 - 完成了它，正在调用JQUERY代码

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

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

由于

Answer 1

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

脚本文件

     <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

看看documentation。我相信您要做的是在计算按钮中添加data-toggle="modal"属性，然后在调用calculate函数时进行调整，它会通过Javascript更改模态中的内容。 / p>

模态只是普通的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');

（或者您也可以使用'show'代替切换）对于计算值...您只需要将这些值添加到模态的html中。所以只需获取元素。

output = document.getElementById('yourOutputTagId');

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

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

Javascript变量到Bootstrap模态

4 个答案: