Are "alerts" in Bootstrap4 blocking? If not , is there a way to do so?

Question

I'm trying to "alert" the user if they have checked more than one row in a table. If length is not equal to one, I show an alert which can be dismissed. I don't want to continue to another template until the user dismisses the alert. However, it seems to be non-blocking.

I have looked for a description of the alert behavior, but I don't see this description of blocking vs non-blocking.

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

  }
};

Answer 1

No, they don't block. At Tim's suggestion, I used a modal instead. The modal doesn't block either. That is, execution of the "else" clause will continue, but the modal will appear and the user won't be able to move on until they close the modal. When they close it, user remains at original page. The modal is probably more noticeable to the user anyway. Thanks again Tim.

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