多个自举模态重叠

Question

我在Backbone.js应用程序中有一个表单模式，成功隐藏了表单的提交。但是当我退出时，创建一个新用户并再次触发模态，它现在将是两个叠加在彼此之上的模态。然后三个......等等。如果我想再次隐藏模态，我必须在模态外单击两次，或者三次或多次触发模态+退出+注册+触发模态过程。< / p>

我曾尝试寻找类似的问题，但尚未找到解决方案。我不知道是否正在缓存某些内容，或者我是否只是以错误的方式删除模式。

之前有没有人见过这种问题？有什么想法吗？

There are two divs each of .modal-backdrop and .modal

提前致谢。

这是响应点击的功能。

onSaveAccountBtnClick: function (e) {
      e.preventDefault();
      setTimeout(function () {
          this.event_bus.trigger('LoginMain.openSignUpView', this.event_bus);
}.bind(this), 500);

openSignUpView事件触发：

    onSignUpBtnClick: function(e) {
        new SignUpView({
            event_bus: this.event_bus ? this.event_bus : this
        }).render();
    }

以下是成功回调：

success: _.bind(function(session) {
                  // Set the session and go to the homepage
                  utils.setUserSession(session);
                  this.onModalHidden();
                  this.event_bus.trigger('LayoutView.unblock');
                  utils.removeLoginStyle();
                  utils.removeSignUpModal();
                  this.event_bus.trigger('Router.navigate', 'home', { trigger: true });
                }, this)

成功时，三个函数被称为

    onModalHidden: function(e) {
        if (e) {
            e.preventDefault();
        }
        this.$el.modal('hide');
        this.remove();
    }

和

    removeLoginStyle: function(){
        $('body').removeClass('login');
    }

和

    removeSignUpModal: function(){
        $('body').removeClass('modal-dialog');
        $('body').removeClass('sign-up-dialog');
    }

这是模态注册.js

<div class="modal-dialog sign-up-dialog">
<div class="modal-content">
    <div class="modal-header">
        <div class="glyphicon logo-modal icon-logo-outline-black"></div>
        <%if(session){%>
          <p class="modal-title-text">Let’s save your account for later use!</p>
        <%}else{%>
          <p class="modal-title-text">Let’s get you set up to look for high schools.</p>
        <%}%>
    </div>
    <div class="alert alert-danger" role="alert" >
        <strong>Oh snap!</strong> <span>An unknown error has occurred.</span>
    </div>
    <form class="modal-body">
        <div class="form-group">
              <%if(!session){%>
                <p>What's your first name?</p>
                <input name="first_name" class="form-control" type="text" placeholder="First Name">
              <%}%>
            <span class="help-block hidden">First Name can't be blank.</span>
        </div>
        <div class="form-group">
            <%if(session){%>
              <p>Change your Username</p>
              <input name="username" class="form-control" type="text" placeholder="<%=session.username%>">
            <%}else{%>
              <p>Create a Username</p>
              <input name="username" class="form-control" type="text" placeholder="Username">
            <%}%>
            <span class="help-block hidden">Invalid Username.</span>
        </div>
        <div class="form-group">
            <p>Create a secret password.</p>
            <input name="password" class="form-control" type="password" placeholder="Password">
            <span class="help-block hidden">Password must be at least 6 chars.</span>
        </div>
        <div class="form-group">
            <input name="confirm_password" class="form-control" type="password" placeholder="Confirm Password">
            <span class="help-block hidden">Both passwords must match.</span>
        </div>
        </br>
        <p class="privacy">By clicking <%= session ? '"Save Account"' : '"Sign Up"'%> you agree that you have read and understood our <a class="goPrivacy">Privacy Policy</a></p>
        <%if(session){%>
          <button type="button" class="btn btn-primary save-account">SAVE ACCOUNT</button>
        <%}else{%>
          <button type="button" class="btn btn-primary sign-up">SIGN UP</button>
        <%}%>
    </form>
    <div class="modal-footer">
        <!--<a class="modal-footer-text" href="#">Already Member of SchoolSearch?</a></br>-->
        <!--<a class="create-account open-login">LOG IN</a>-->
    </div>
</div>

初始化函数

        initialize: function (options) {
        _.extend(this, options);
        this.model = this.model || new UserModel();
        this.model.set('organization_id', 100);
    }

这是afterRender功能

        afterRender: function() {
        this.$el.modal('show');

        this.$error         = this.$('.alert-danger');
        this.$error_msg     = this.$error.find('span');
    }

onModalShown

        onModalShown: function(e) {
        this.bindValidation();
    }