如何在输入焦点和停止时触发模态

Question

如果输入值为空并且在焦点上，我尝试在模态上打开facebook登录。

<input type="text" class="form-control" name="name" id="facebooklogin"/>

<script>

$("input#facebooklogin").focus(function(){

if($(this).val().length === 0) {

$("#facebookModal").modal("show");

$(this).attr('id','facebookopen'); // i changed the id

   }
});

 </script>

但是在更改了id后，如果我再次点击输入，它会保持打开模态

我如何阻止模态保持开放？

     <div class="modal fade modal-login modal-border-transparent" id="facebookModal" tabindex="-1" role="dialog" aria-hidden="true">
     <div class="modal-dialog">
     <div class="modal-content">
     <button type="button" class="btn btn-close close" data-dismiss="modal" aria-label="Close"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> </button>
     <div class="clear"></div>

     <div id="modal-login-form-wrapper"> 
     <div class="modal-body pb-5">
        <h3 class="text-center heading mt-10 mb-20">Register</h3>
        <button class="btn btn-facebook btn-block">Register with Facebook</button>
        </div>
          </div>
       </div> </div>  </div>

由于