Модальный бутстрап открыт и закрыт после вызова из функции

Question

Я пытаюсь вызвать модальное окно bootstrap из события click.

Если я попытаюсь назвать это напрямую, у меня нет проблем. Если я попытаюсь вызвать его из функции, откроется окно и немедленно закроется.

Я искал и увидел, что единственный экземпляр, который я обнаружил, что это происходит, - это когда я повторяю перезагрузку js-файла, но, как вы видите на моей скрипке, это не так.

Несмотря на то, что я могу продвигаться в своем проекте, непосредственно называя модальный, я хотел бы убедиться, что это какая-то сдержанность, а не ситуация, которая укусила бы меня позже.

Я использую Bootstrap R. 3.3.4 и jquery 2.1.4.

Это моя скрипка: https://jsfiddle.net/calito22/gf9h8ez4/10/

<nav class="navbar navbar-default yvmc-header"> 
    <div class="container-fluid"> 
    <div class="yvmc-header--top-right-link--container text-right hidden-xs"> 
    <a href="" id="test" class="top-right--link showCreatePropertyWizard">CLick here to see the modal</a>  
    </div> 
    </div> 
    </nav> 

    <div class="modal fade active" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModal"> 
    <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">&times;</span> 
       </button> 
       <h4 class="modal-title text-center">Ingresa</h4> 
      </div> 
      <div class="modal-body login-modal--body"> 
       <div class="container-fluid"> 
        <div class="col-lg-10 col-lg-offset-1"> 
         <p id="registrate" class="modal-sub-title text-center">&iquest;No est&aacute;s Registrado? <a href="">Reg&iacute;strate aqu&iacute;</a></p> 
         <form> 
          <div class="form-group"> 
           <div class="input-group"> 
            <span aria-label="email" class="input-group-addon email-login-icon"></span> 
            <input autofocus size="100" type="email" class="form-control" id="EmailLogin" placeholder="Email"> 
           </div> 
          </div> 
          <div class="form-group"> 
           <div class="input-group"> 
            <span class="input-group-addon password-login-icon"></span> 
            <input size="100" type="password" class="form-control" id="PasswordLogin" placeholder="Clave"> 
           </div> 
          </div> 
          <div class="form-group"> 
           <label class="checkbox-inline"> 
            <input type="checkbox" value=""> Recordar Sesi&oacute;n 
           </label> 
           <span class="" style="float: right;"><a href="">&iquest;Olvidaste tu clave?</a></span> 
          </div> 
          <div class="text-center"> 
           <button type="submit" id="ingresar" class="btn blue-button">Ingresar</button> 
          </div> 
         </form> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
     $("#test").on("click",function() { 
     wizardproperties(); 
    }); 
    function wizardproperties(){ 
     $('#loginModal').modal('toggle'); 
     return false; 
     } 

Answer 1

Обновлен своего fiddle

$("#test").on("click",function() { 
    wizardproperties(); 
}); 
function wizardproperties(){ 
    $('#loginModal').modal('show'); 
    return false 
}