引導模態的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屬性（根據您的設計）。

設置所有必需值后，您可以通過上述功能調用模態。