当我点击我网站上的signIn按钮时，我使用了两个Popup模型一个signIn Popup模型将打开...如果用户没有注册，它将要求创建帐户...我已经给了一个href in signin打开另一个弹出窗口并关闭第一个弹出窗口......同样的事情是第二个弹出窗口。当用户处于第二个弹出窗口时，还有另一个href登录...

SignIn Popup模型启动代码

<div class="modal fade" id="signIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="colorStrips">
          <div class="col-sm-3 colorStrips1">
          </div>
          <div class="col-sm-3 colorStrips2">
          </div>
          <div class="col-sm-3 colorStrips3">
          </div>
          <div class="col-sm-3 colorStrips4">
          </div>
        </div>
      <div class="modal-body model-padding">     
        <!-- <div class="col-sm-6"> -->
          <div class="form-group form-area">
            <input type="email" class= "form-control form-field" id="popupSignInEmail" placeholder="Email Address">
          </div>
          <div class="form-group form-area">
            <input type="password" class= "form-control form-field" id="popupSignInEmail" placeholder="Password">
          </div>
          <div class="one-block-item form-inline">
          <div class="checkbox col-sm-6">
            <label>
              <input type="checkbox"> Remember me
            </label>
          </div>
          <div class="col-sm-offset-2 col-sm-4">
          <a href="#forgotPwd">Forgot Pasword ? </a>
        </div>
        </div>
        <div class="radial-signin">
          <center>
            <a type="submit" href="#signInData" class="btn btn-signin wow fadeInUp" data-wow-duration="1200ms" data-wow-delay="300ms" data-role="popup-link wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="800ms">SIGN IN</a>
          </center>
        </div>
        <!-- </div> -->
        <div class="toggleTosignUp">
          <center>
            <span class="textofsignin">Are you a new user ? <a onclick="launch_modal('#signUp');" data-toggle="modal" href="#signUp" id="signUpClicked" class="markuptext-S">Create Account</a>
          </center>
        </div>
      </div>
    </div>
  </div>
</div>

注册弹出开始代码

<div class="modal fade" id="signUp" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="colorStrips">
          <div class="col-sm-3 colorStrips1">
          </div>
          <div class="col-sm-3 colorStrips2">
          </div>
          <div class="col-sm-3 colorStrips3">
          </div>
          <div class="col-sm-3 colorStrips4">
          </div>
        </div>
      <div class="modal-body model-padding">     
        <!-- <div class="col-sm-6"> -->
          <div class="form-group form-area">
            <input type="email" class= "form-control form-field" id="popupSignInEmail" placeholder="Email Address">
          </div>
          <div class="form-group form-area">
            <input type="password" class= "form-control form-field" id="popupSignInEmail" placeholder="Password">
          </div>
          <div class="one-block-item form-inline">
          <div class="checkbox col-sm-6">
            <label>
              <input type="checkbox"> Remember me
            </label>
          </div>
          <div class="col-sm-offset-2 col-sm-4">
          <a href="#forgotPwd">Forgot Pasword ? </a>
        </div>
        </div>
        <div class="radial-signin">
          <center>
            <a type="submit" href="#signInData" class="btn btn-signin wow fadeInUp" data-wow-duration="1200ms" data-wow-delay="300ms" data-role="popup-link wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="800ms">SIGN IN</a>
          </center>
        </div>
        <!-- </div> -->
        <div>
          <center class="toggleTosignIn">
            <span class="textofsignin">Already have an account ?<a onclick="launch_modal('#signIn');" href="javascript:void(null);" class="markuptext-S" id="signInClicked">Sign In</a>
          </center>
        </div>
      </div>
    </div>
  </div>
</div>

我尝试过以下JS：

function launch_modal(id) {
     $('.modal').modal('hide');
     $('#'+id).modal('show');
     $('body').css({"padding-right" : "0 !important"});
  }

$('#signIn').on('show.bs.modal', function (e) {
     $('body').addClass('test');
});
$('#signUp').on('show.bs.modal', function (e) {
     $('body').addClass('test');
});

现在出现问题：当我第二个模型第一个被关闭。但是当我想要第一个模型时，即第二个弹出窗口中的signIn Popup，即signUp Popup它不能这样做..

Answer 1

从选择器中删除＃：

function launch_modal(id) {
     $('.modal').not(id).modal('hide');
     $(id).modal('show');
  }

Bootstrap网页中的两个模型弹出窗口

1 个答案: