javascript - 显示两个 Bootstrap 模式之一，具体取决于 javascript 函数返回 true 还是 false

Question

我有两个 Bootstrap 模态——一个用于成功回答测验，另一个用于回答失败。我想在单击检查答案按钮时，如果检查的值返回 true 以显示模态简单成功，如果显示模态简单失败是错误的。我一直在努力找出 javascript/jquery，并且可以使用一些帮助来填充下面的 javascript 函数。

这是启动功能的按钮，以查看它是否是正确的答案，以及在其下方呈现的模态:

<div class="checkAnswer" data-toggle="modal" href=""> //href should be #modal-simple-success or #modal-simple-failure
  <%= link_to_function "check answer", 'execute();', class: "btn btn-success"%>
</div>
<%= render 'shared/modal_simple_success' %>
<%= render 'shared/modal_simple_failure' %>

这是失败模式:

<div id="modal-simple-failure" class="modal hide fade">
  <div class="modal-footer">
    <button class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
</div>

这是成功模式:

<div id="modal-simple-success" class="modal hide fade">
  <div class="modal-footer">
    <button class="btn btn-default" data-dismiss="modal">Close</button>
    <button class="btn btn-blue" id="successButton">Next step</button>
  </div>
</div>

这是 javascript，如果值为 true，我想使用 jquery 或其他方式显示 model-simple-success

function checkValues(Result)
     checked = //working function to see true or false (don't need this)

    {
   if(checked)
            {

                //since true, display modal-simple-success
            }
            else
            {
                //since false, modal-simple-failure
            }
}

感谢任何帮助

Answer 1

您需要做的就是使用 show 选项调用 Bootstrap 构造函数。即。

function checkValues(Result){
   //your logic to see if it is checked
   if(checked)
     {
        $('#modal-simple-success').modal('show');
     }
     else
     {
        $('#modal-simple-failure').modal('show');
     }
  }

Fiddle

或者简化为:

function checkValues(Result){
       //your logic to see if it is checked
    var $modal = $('#modal-simple-failure');
    if(checked)
       $modal = $('#modal-simple-success');

    $modal.modal('show');
}