when click lost focus on anchor tag

Question

By using keyboard tabbing and press enter on anchor, the layer enable to show.

The problem is the focus getting lost when the Focus2 anchor pressed.

I want to keep focused when even press keyboard enter on "focus2" anchor tag

This is what I tried so far.

https://jsfiddle.net/0gfqtc4v/19/

<a href="#">focus1</a><br>  
<a href='#' class='basic'>focus2</a><br> 
<a href="#">focus3</a><br>
<a href="#">focus4</a><br>

<script
  src="https://code.jquery.com/jquery-1.7.2.min.js"
  integrity="sha256-R7aNzoy2gFrVs+pNJ6+SokH04ppcEqJ0yFLkNGoFALQ="
  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/simplemodal/1.4.4/jquery.simplemodal.min.js"></script>

<script>
jQuery(function ($) { 

    $('.basic').click(function (e) {
        $('#basic-modal-content').modal();  
        $('.basic').focus();
        return false;
    });

});
</script>

:focus { outline:2px solid red;}
.basic { font-weight:bold; font-size:20px;}


#basic-modal-content {display:none;} 
/* Overlay */
#simplemodal-overlay {background-color:#000;} 
/* Container */
#simplemodal-container {height:260px; width:200px; color:#bbb; background-color:#333; border:4px solid #444; padding:12px;}
#simplemodal-container .simplemodal-data {padding:8px;}
#simplemodal-container code {background:#141414; border-left:3px solid #65B43D; color:#bbb; display:block; font-size:12px; margin-bottom:12px; padding:4px 6px 6px;}
#simplemodal-container a {color:#ddd;}
#simplemodal-container a.modalCloseImg {background:url(http://www.ericmmartin.com/wordpress/wp-content/themes/emm-v3/demos/x.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer;}
#simplemodal-container h3 {color:#84b8d9;}

Please help

Answer 1

Here, I have made focus:false. In this senerio, if user click on focus 2. Model will popup and focus will have continue on it's position but if user click on any next element, it will loose it's focus because user have give another event trigger for another html. If you do not want to loose focus event user click on modal you may need to pass some class .

$('#basic-modal-content').modal(
      {
                    focus:false
      }
    ); 

Answer 2

When working with focus, I find it Works best if it's wrapped in a timeout, like this:

$('.basic').click(function (e) {
        $('#basic-modal-content').modal();
        settimeout(function(){
            $('.basic').focus();
        }, 100);
        return false;
    });

This approach gives the browser a 'break' to set the focus. If it doesn't Work, try increasing the timeout value.