Являются ли "оповещения" в Bootstrap4 блокирующими?Если нет, есть ли способ сделать это? - PullRequest
Новая
       14

Являются ли "оповещения" в Bootstrap4 блокирующими?Если нет, есть ли способ сделать это?

1 голос
/ 05 апреля 2019

Я пытаюсь «предупредить» пользователя, если он проверил более одной строки в таблице. Если длина не равна единице, я показываю предупреждение, которое можно отклонить. Я не хочу переходить к другому шаблону, пока пользователь не отклонит предупреждение. Тем не менее, это, кажется, неблокирует.

Я искал описание поведения оповещения, но я не вижу это описание блокировки против неблокирования. 

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

  }
};

1 Ответ

1 голос
/ 05 апреля 2019

Нет, они не блокируют.По предложению Тима я вместо этого использовал модал.Модал тоже не блокирует.Таким образом, выполнение предложения "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")                     
  }
};
...