Bootstrap 当我在 escape keydown 上使用 modal('toggle') 时，Modal 不切换

Question

我有一个功能，可以通过按退出键打开和关闭 bootstrap 模态。但是，toggle 函数只显示模态。我必须手动单击退出按钮才能将其隐藏。

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

我知道在 JQuery 中，toggle() 事件显示然后隐藏一个元素。我原以为模式会在我按下转义键后消失。

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

Answer 1

试试这个。

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

而不是

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

Answer 2

这没有按预期工作的原因是模态插件已经为 escape keydown event.

定义了功能

您可以覆盖此功能，但它会很混乱，您的最终用户不会期望此行为。我建议您在另一个键上使用它并向您的用户解释。

类似于：

//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，它会隐藏模态。

Bootstrap 当我在 escape keydown 上使用 modal('toggle') 时，Modal 不切换

Bootstrap Modal doesn't toggle when I modal('toggle') on escape keydown

jquery

twitter-bootstrap

bootstrap-modal