Question

我有两个引导模式 - 一个用于成功回答测验，另一个用于失败的答案。我希望在单击检查答案按钮时，如果选中的值返回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或一些替代方法显示模型简单成功

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');
}

Answer 2

我想说使用以下

if (checked) {
    body.appendChild("modal-simple-success")
}
else {
    body.appendChild("modal-simple-failure")
}

应该可以在你想要的时候出现这些模态。

显示两个引导模式中的一个，具体取决于javascript函数是返回true还是false

2 个答案: