JavaScript变量引导模式 [英] Javascript Variable to Bootstrap Modal

问题描述

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

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

在调查问卷结尾，您可以点击计算结果，并使用快速的Javascript函数来计算分数，Alert Popup会为您提供分数。 b
$ b

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

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

谢谢

编辑

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

  $（ '＃myResults'）的HTML（计数器）。 
  

在我的模型中 - 将代码片段移入主javascript函数中，并且工作正常。知道这将是一个简单的..可能是时间停止工作，我认为

谢谢

解决方案

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

脚本文件
$ b

 < script> 
函数testFun（变量）{
 
 document.getElementById（'testH1'）。innerHTML = variable; 
} 
< / script> 
  

HTML

 < button class =btn btn-primary btn-lgonclick =testFun（'testId'）data-toggle =modaldata-target =＃myModal > 
启动演示模式
< / button> 
< div class =modal fadeid =myModaltabindex = -  1role =dialogaria-labelledby =myModalLabelaria-hidden =true> 
< div class =modal-dialog> 
< div class =modal-content> 
< div class =modal-header> 
< button type =buttonclass =closedata-dismiss =modalaria-hidden =true>& times;< / button> 
< h4 class =modal-titleid =myModalLabel>模式标题< / h4> 
< / div> 
< div class =modal-body> 
< h1 id =testH1>< / h1> 
< / div> 
< div class =modal-footer> 
< button type =buttonclass =btn btn-defaultdata-dismiss =modal>关闭< / button> 
< button type =buttonclass =btn btn-primary>保存更改< / button> 
< / div> 
< / div> 
< / div> 
< / div> 
  

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 of checkboxes. These checkboxes are for simple self evaluation yes/no questionnaire that are weighted with different values based on the questions.

At the end of the questionnaire, you hit calculate results and it used a quick Javascript function to calculate the score and an Alert Popup give you the score

I recently migrated the page to Bootstrap 3 and cleaned it up a bit but want to use a Modal to popup instead of the old style Javascript alert

Is there a simple way of passing the javascript calculated variable from the main page to a Bootstrap Modal

Thanks

EDIT

Right - Worked it out, was calling the JQUERY code

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

From within my Model - moved the snippet into the main javascript function and it works. Knew it was going to be a simple one.. Might be time to stop working i think

Thanks

解决方案

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>

这篇关于JavaScript变量引导模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！