Bootstrap4 中的“警报”是不是阻塞？如果没有，有没有办法这样做？

Posted 2023-03-13

【中文标题】Bootstrap4 中的“警报”是不是阻塞？如果没有，有没有办法这样做？

【英文标题】：Are "alerts" in Bootstrap4 blocking? If not , is there a way to do so?Bootstrap4 中的“警报”是否阻塞？如果没有，有没有办法这样做？

【发布时间】：2019-04-05 17:27:46

【问题描述】：

如果用户检查了表格中的多行，我会尝试“提醒”他们。如果长度不等于一，我会显示一个可以关闭的警报。在用户关闭警报之前，我不想继续使用另一个模板。但是，它似乎是非阻塞的。

我已经查找了警报行为的描述，但我没有看到阻塞与非阻塞的描述。

<div class="alert alert-warning alert-dismissible collapse" id="selectonlyone" 
  roll="alert">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <strong>Warning!</strong> Select only one row to edit!
</div>





document.getElementById("btn3").onclick = function() 
  var rowids = mytable.rows('.selected').data();
  var pkids = [];  
  var arrayLength = rowids.length;
  if(arrayLength==1)
    ...some code

  
  else 
    $('#selectonlyone').show();
    document.location.href = "% url 'show_template'  %" ;

  
;

【问题讨论】：

不确定 Bootstrap 4，但尝试使用 Modal；在 BS3 中，您可以设置它以便他们必须关闭它才能继续 (data-backdrop="static" data-keyboard="false")

是的，无论如何，模态可能比警报更能吸引用户的注意力。你回答了我的问题并给了我解决方案。如果您想要积分，请更改为答案。谢谢。

我应该补充一点，我必须删除 else 子句中的第二行。else $('#myModal').modal("show") 关闭模式后，您最终会进入同一页面以允许用户响应警告。

默认情况下，模态框会在您所在的屏幕上弹出；除非您的 JS 代码具有这样做的逻辑，否则没有关联的视图的重定向/更改。我会让你为这个添加一个自我答案；我只是在这个过程中给出了一个提示。干杯。

【参考方案1】：

不，他们不会阻止。在蒂姆的建议下，我改用了模态。模态也不会阻塞。也就是说，“else”子句的执行将继续，但模态将出现，用户将无法继续，直到他们关闭模态。当他们关闭它时，用户仍留在原始页面。无论如何，模态对用户来说可能更明显。再次感谢蒂姆。

<div class="modal fade" tabindex="-1" id="myModal" role="dialog" data-backdrop="static" data-keyboard="false" aria-labelledby="exampleModalLabel" data-toggle="modal"  aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Warning!</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Select only one row to edit!</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>          



document.getElementById("btn3").onclick = function() 
  var rowids = mytable.rows('.selected').data();
  var pkids = [];  
  var arrayLength = rowids.length;
  if(arrayLength==1)
    some code...
  
  else 
    $('#myModal').modal("show")                     
  
;