引导模式的 Javascript 变量答案

【问题标题】：Javascript Variable to Bootstrap Modal引导模式的 Javascript 变量
【发布时间】：2014-04-13 07:42:06
【问题描述】：

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

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

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

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

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

谢谢

编辑

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

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

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

谢谢

【问题讨论】：

我不明白，如果它不在主页中，模式在哪里？
从主页面调用模态并在同一页面中显示为单独的 div，只是由于某种原因，在主页面中生成的任何 javascript 变量都不会显示在模态弹出窗口中

标签： javascript jquery html twitter-bootstrap

【解决方案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>

【讨论】：

我添加了bootstrap css，还需要jquery之类的吗？

【解决方案2】：

看看documentation。我相信你想要做的是在你的计算按钮上添加一个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;
}

希望我能理解你的问题。

【讨论】：

我没有看到你的代码中调用了 calculate()。

【解决方案3】：

引导模式不支持此功能。但你可以自己写吗？

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

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

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

【讨论】：

【解决方案4】：

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

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

（或者您也可以使用“显示”而不是切换）而对于计算出来的值……你只需要将这些值添加到 modal 的 html 中。所以只需获取元素。

output = document.getElementById('yourOutputTagId');

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

在设置完所有需要的值后，你通过上面提到的函数调用你的模态。

【讨论】：