Bootstrap 4 是"；警报“；在Bootstrap4阻塞中？如果没有，有没有办法？

如果用户检查了表中的多行，我将尝试“提醒”用户。如果长度不等于1，我将显示一个可以解除的警报。在用户解除警报之前，我不想继续使用其他模板。然而，它似乎是非阻塞的

<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'  %}" ;

  }
};

我已经寻找了警报行为的描述，但是我没有看到关于阻塞与非阻塞的描述

<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'  %}" ;

  }
};

&时代；
警告仅选择一行进行编辑！
document.getElementById（“btn3”）.onclick=function（）{
var rowids=mytable.rows（'.selected'）.data（）；
var pkids=[]；
var arrayLength=rowids.length；
如果（排列长度==1）{
…一些代码
}
否则{
$（'#selectonlyone'）.show（）；
document.location.href=“{%url'显示\模板“%””；
}
};

不，它们不会阻塞。在蒂姆的建议下，我使用了情态动词。模态也不阻塞。也就是说，将继续执行“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")                     
  }
};

警告
&时代；
只选择一行进行编辑

接近
document.getElementById（“btn3”）.onclick=function（）{
var rowids=mytable.rows（'.selected'）.data（）；
var pkids=[]；
var arrayLength=rowids.length；
如果（排列长度==1）{
一些代码。。。
}
否则{
$（“#myModal”）.modal（“show”）
}
};

不确定Bootstrap 4，但尝试使用模式；在BS3中，您可以对其进行设置，使其必须关闭才能继续（

data background=“static”data keyboard=“false”

）是的，无论如何，模式可能比警报更能吸引用户的注意力。你回答了我的问题，给了我答案。如果你想要分数，就换一个答案。谢谢。我应该补充一点，我必须删除else子句中的第二行。

else{$（'#myModal'）.modal（“show”）}

关闭modal后，您将在同一页面上结束，以允许用户响应警告。默认情况下，modals将在您所在的同一屏幕上弹出；除非JS代码具有这样做的逻辑，否则不会重定向/更改关联的视图。我让你为这个问题添加一个自我回答；我只是简单地暗示了一下这个过程。干杯