Question

我有一个函数应该通过按下转义键来打开和关闭引导模式。但是，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

这不能按预期工作的原因是因为Modal插件已经为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 ，它将隐藏模态。

Answer 2

试试这个。

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

而不是

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

当我在转义keydown上进行模态（＆＃39;切换＆＃39;）时，Bootstrap模态不会切换

2 个答案: