jquery - Removing the :focus state from a link after modal window closes -
i want remove :focus state links open modal window once modal closed. currently, , seems normal bootstrap behavior link maintains focus until user clicks elsewhere on page. i've tried;
$('.modal').on('hidden.bs.modal', function () { $('a').unbind('click', '.main-body'); })
doesn't seem want. tried throwing in alert message, , while alert open focus go away returns alert closes. ideas or appreciated.
<div class="container"> <div class="row"> <p><a href="#" data-toggle="modal" data-target="#mymodal" class="main-body">click 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">×</span></button> <h4 class="modal-title" id="mymodallabel">modal title</h4> </div> <div class="modal-body"> stuff goes here 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/)
add javascript:
$('#mymodal').on('hidden.bs.modal', function () { settimeout(function(){$('[data-target="#mymodal"]').blur();}, 10); });
it uses event fired bootstrap when dialog closes. if don't set timeout, link gets focus again (not sure why, guess focus set link right after event fired... anyway).
Comments
Post a Comment