Modal Bootstrap 被函数调用后打开和关闭

Question

我尝试从点击事件中调用 bootstrap 模态 window。

如果我尝试直接调用它，我没有问题。如果我尝试从函数中调用它，那么 window 会立即打开和关闭。

我搜索并发现我发现出现此行为的唯一实例是当我重复 bootstrap js 文件时，但正如您在我的 fiddle 中看到的那样，情况并非如此。

尽管我可以在我的项目中直接调用模态，但我想确保这是某种约束，而不是以后会咬我的情况。

我正在使用 Bootstrap R. 3.3.4 和 jquery 2.1.4。

这是我的fiddle：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
}

Modal Bootstrap 被函数调用后打开和关闭

Modal Bootstrap is open and closing after being called from a function

jquery

modal-dialog

twitter-bootstrap