All geek questions in one place

Bootstrap modal restores button focus on close

It is very difficult for me to deal with one effect, which, it seems to me, is needed in Bootstrap, but I want to run away. I have a button:

<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>

Which opens a modal window with some video:

 <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>

So when I close the modal, my button automatically focuses. This effect is needed in Bootstrap and how can I avoid it? I do not want my button to be in focus after closing the modal.

+12
source share
5 answers

Allowed this by deleting

 d.trigger("focus")

in 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
source

You can simply write the function to your custom.js file.

 $(document).ready(function() { $('.close')on("click", function() { $(".btn").blur(); }); });
+2
source

Blur buttons when closing modal mode.

 $('body').on('hidden.bs.modal', '.modal', function() { $('.btn').blur(); });
+2
source

By default in Bootstrap, a link or button gets focus after closing modal mode. You can avoid this with this code:

 $('#mymodal').on('hidden.bs.modal', function () { relatedTarget.blur(); });
0
source

You can use this method so that the modal trigger loses focus when the modal window is closed:

 $('#myModal').on('shown.bs.modal', function (e) { $('#modalTrigger').one('focus', function (e) { $(this).blur(); }); });

Example:

 $(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>
0
source

Source: https://habr.com/ru/post/987495/

More articles:


All Articles