Question

我想从模式关闭后打开模态窗口的链接中删除：焦点状态。目前，似乎正常的Bootstrap行为是链接保持焦点，直到用户点击页面上的其他位置。我试过了;

$('.modal').on('hidden.bs.modal', function () {

  $('a').unbind('click', '.main-body');

})

似乎没有按我的意愿行事。我试着投入一条警告信息，当警报打开时，焦点会消失，但一旦警报关闭就会恢复。任何想法或帮助都非常感激。

<div class="container">
  <div class="row">

    <p><a href="#" data-toggle="modal" data-target="#myModal" class="main-body">Click to Enlarge</a></p>

  </div>

</div>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
  <div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
  </div>
  <div class="modal-body">
    Some stuff goes here to read
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div>
</div>
</div>

[jsFiddle]（https://jsfiddle.net/jhottle/a5gcyfn5/10/）

Answer 1

将此添加到您的Javascript：

$('#myModal').on('hidden.bs.modal', function () {
   setTimeout(function(){$('[data-target="#myModal"]').blur();}, 10);
});

它使用对话框关闭时由引导程序触发的事件。如果你没有设置超时，链接会再次获得焦点（不完全确定原因，但我想焦点在事件被触发后立即设置为链接......无论如何）。

在模态窗口关闭后从链接中删除：焦点状态

1 个答案: