Bootstrap Modal не переключается, когда я модальный («переключаю») при нажатии клавиши escape

У меня есть функция, которая должна включать и выключать модальный режим начальной загрузки, нажимая клавишу выхода. Однако функция toggle показывает только модальное окно. Мне нужно вручную нажать кнопку выхода, чтобы она скрылась.

$(document).keyup(function(e) {
  if (e.keyCode == 27) {
    $("#myModal").modal('toggle');
  }
});

Я знаю, что в JQuery событие toggle() показывает, а затем скрывает элемент. Я ожидал, что модальное окно исчезнет после того, как я нажму escape.

HTML

<div class="modal bs-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">

  <div class="modal-content">
    <div class="modal-header">
      <ul class="list-inline">
        <li><h4 class="modal-title">Title</h4></li>
        <li class="list-right"><button id="new">New</button></li>
        <li><button id="close"><span>&times;</span></button></li>
      </ul>
    </div>
  </div>
</div>

Нажатие на кнопку скрывает это модальное окно.

$("#close").click(function() {
  $("#myModal").hide();
});

jquery twitter-bootstrap bootstrap-modal
person Darkmouse    schedule 26.01.2015    source источник
comment
Боковое примечание: Toggle скрывает элемент, если он отображается, и показывает его, если он скрыт — не показывать затем скрывать.   -  person Tim Lewis    schedule 26.01.2015
comment
Это связано с тем, что плагин modal уже определил поведение для выхода. Почему вы хотите это изменить? Это противоречит обычному пользовательскому опыту.   -  person Carrie Kendall    schedule 26.01.2015
comment
Это будет работать с другими ключами. Я настоятельно рекомендую вам не изменять поведение по умолчанию, потому что это раздражает вашего конечного пользователя.   -  person Carrie Kendall    schedule 26.01.2015

Ответы (2)


arrow_upward
2
arrow_downward

Причина, по которой это не работает должным образом, заключается в том, что плагин Modal уже определил функциональность для экранировать событие нажатия клавиши.

Вы можете переопределить эту функцию, но это будет беспорядочно, и ваш конечный пользователь не будет ожидать такого поведения. Я бы посоветовал вам использовать это на другом ключе и объяснить это вашему пользователю.

Что-то типа:

//enable tooltip for your message about toggling the modal
$(function () {
  $('[data-toggle="tooltip"]').tooltip();
});

//toggle the modal on tilde
$(document).keyup(function(e) {
  if (e.keyCode == 192) {
    $("#myModal").modal('toggle');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>


<div class="modal bs-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">

  <div class="modal-content">
    <div class="modal-header">
      <ul class="list-inline">
        <li><h4 class="modal-title">Title</h4></li>
        <li class="list-right"><button id="new">New</button></li>
        <li><button id="close"><span>&times;</span></button></li>
      </ul>
    </div>
  </div>
</div>

<button type='button' class='btn btn-default' data-toggle='modal' data-target='#myModal'>click to open</button>
<span class='glyphicon glyphicon-info-sign text-info' data-toggle="tooltip" data-placement="right" title="Press the tilde key to toggle"></span>

Примечание. Обратите внимание, что если вы нажмете `, а затем Esc, модальное окно будет скрыто.

person Carrie Kendall    schedule 26.01.2015

arrow_upward
0
arrow_downward

Попробуй это.

$("#myModal").modal('show');

вместо

$("#myModal").modal('toggle');
person EDarrien    schedule 26.01.2015