Переменная Javascript для начальной загрузки модальная

Question

Переменная Javascript для начальной загрузки модальная

Получил то, что, вероятно, просто, но мой google подводит меня в данный момент, так что надеюсь, что я могу получить немного толчок в правильном направлении

У меня есть HTML-страница, которая в основном представляет собой кучу флажков. Эти флажки предназначены для простой самооценки опросника Да / Нет, которые взвешиваются с различными значениями, основанными на вопросах.

В конце анкеты вы нажимаете вычислить результаты, и он использует быструю функцию Javascript для вычисления баллов и оповещения Всплывающее окно дает вам счет

Я недавно перенес страницу в Bootstrap 3 и немного очистил ее, но хочу использовать модальное всплывающее окно вместо предупреждения Javascript старого стиля

Существует ли простой способ передачи вычисляемой переменной javascript с главной страницы в модальный загрузчик

Спасибо

Править

Правильно-разобрался, вызывал код JQUERY

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

Из моей модели-переместил фрагмент в основную функцию javascript и он завод. Я знал, что все будет очень просто.. Может быть, пора перестать работать, я думаю

Спасибо

529 4

jQuery javascript html twitter-bootstrap

4 ответов:

Comments

Ничего не найдено.

Amila Iddamalgoda · Accepted Answer · 2014-03-10 11:32:08

Да . Вы можете передать переменную в bootstrap modal.

Файл скрипта

     <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>

aug · Accepted Answer · 2014-03-10 11:32:21

Взгляните на документацию . Я думаю, что вы захотите добавить атрибут data-toggle="modal" к кнопке calculate, а затем сделать так, чтобы при вызове функции calculate она изменяла содержимое в модальном режиме через Javascript.

Модальный-это обычный HTML, и вы можете присваивать идентификаторы всему, что хотите. Оттуда вы можете редактировать его с помощью innerHTML

<a href="#myModal" role="button" class="btn" data-toggle="modal">Calculate</a>


<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;
}
Надеюсь я понял ваш вопрос.

springbo · Accepted Answer · 2014-03-10 11:32:29

Bootstrap modal не поддерживает эту функцию. Но вы могли бы написать свой собственный?
function showModal(score){
  $('#myModal .score').html(score);
  $('#myModal').modal('show')
}
Итак, нажав на результаты расчета, которые выглядят примерно так.
$('#buttonCalcResults').click(function(){
  var score = foo+bar+whatever
  showModal(score);
})

sumitb.mdi · Accepted Answer · 2014-03-10 11:32:38

Как Jahnux73 уже сказал (или имел в виду), что модальный будет на той же странице, где вы хотите, чтобы он появился. Поэтому в функции, где вы вызываете окно оповещения, вам просто нужно вызвать этот модальный режим.
 $('#yourModalId').modal('toggle');
(или вы также можете использовать "показать" вместо переключения) И для расчетных значений...вам просто нужно добавить эти значения в html modal. Так что просто получите элемент.
output = document.getElementById('yourOutputTagId');
И затем вы можете задать свойства этого выходного объекта; либо вы хотите innerHTML, либо значение атрибут (в соответствии с вашим дизайном.)

После установки всех необходимых значений вы вызываете свой модал с помощью функции, упомянутой выше.