logo标签列表

Bootstrap 模态框关闭时恢复按钮焦点

csstwitter-bootstrap
19

我正在与一个问题进行非常困难的斗争，这个问题我相信是Bootstrap想要的，但是我想要回避它。我有一个按钮：

<a data-toggle="modal" data-target="#video" class="btn btn-primary btn-lg" href="#">Video<i class="pe-7s-angle-right pe-2x pe-va" style="line-height: 0.3;"></i></a>

点击后会打开一个带有视频的弹窗:

<div class="modal fade video-lightbox in" id="video" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="display: block;"><div class="modal-backdrop fade in" style="height: 442px;"></div>

当我关闭模态框时，我的按钮会自动获得焦点。这种效果在Bootstrap中是需要的吗？如何避免它？我不想在关闭模态框后使我的按钮获得焦点。

5个回答
9

当模态框关闭时，模糊按钮。

$('body').on('hidden.bs.modal', '.modal', function() {
    $('.btn').blur();
});
3
您可以使用此方法，在关闭模态框时使模态框触发器失去焦点：
$('#myModal').on('shown.bs.modal', function (e) {
    $('#modalTrigger').one('focus', function (e) {
        $(this).blur();
    });
});

例子：

$(document).ready(function() {
    $('#myModal').on('shown.bs.modal', function (e) {
        $('#modalTrigger').one('focus', function (e) {
            $(this).blur();
        });
    });
});
<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>
<body>
  <button id="modalTrigger" type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open modal
  </button>

  <!-- The Modal -->
  <div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

2
你可以在custom.js文件中简单地编写一个函数。
$(document).ready(function() {
    $('.close')on("click", function() {
        $(".btn").blur();
    });
});
1
如果用户在模态框外单击以关闭它，那么这将无效。 - Optimus
1
默认情况下，在 Bootstrap 中关闭模态框后链接或按钮会获得焦点。您可以使用以下代码来取消焦点：
$('#mymodal').on('hidden.bs.modal', function(event) {
    event.relatedTarget.blur();
});
请问你能描述一下你的代码在做什么吗？谢谢。 - António Almeida
我认为您需要引用事件来查找相关的目标：$('#mymodal').on('hidden.bs.modal', function(event) { event.relatedTarget.blur(); }); - nimmolo
0
通过删除

解决了这个问题。
d.trigger("focus")

在 bootstrap.min.js 文件中：
a.fn.modal = b, a.fn.modal.Constructor = c, a.fn.modal.noConflict = function() {
    return a.fn.modal = d, this
}, a(document).on("click.bs.modal.data-api", '[data-toggle="modal"]', function(c) {
    var d = a(this),
        e = d.attr("href"),
        f = a(d.attr("data-target") || e && e.replace(/.*(?=#[^\s]+$)/, "")),
        g = f.data("bs.modal") ? "toggle" : a.extend({
            remote: !/#/.test(e) && e
        }, f.data(), d.data());
    d.is("a") && c.preventDefault(), f.one("show.bs.modal", function(a) {
        a.isDefaultPrevented() || f.one("hidden.bs.modal", function() {
            d.is(":visible") && d.trigger("focus")
        })
    }), b.call(f, g, this)
})
1
我很惊讶这仍然是一个问题，而这个答案绝对有效，因为其他答案都没有起作用。这也适用于Bootstrap 4模态框。 - Kemoy Campbell
我不想修改 Bootstrap JS 文件，因为：
  1. 这不是一个好的做法
  2. 我只想在特定的模态框中使用它。
有其他解决方案吗？ - Vivek Tomar
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接