Блог

введите описание изображения здесь

Я использовал две всплывающие модели, когда я нажимаю на кнопку входа на своем веб-сайте, откроется одна всплывающая модель входа… Если пользователь не зарегистрирован, он попросит создать учетную запись… Я дал один href в signin, который откроет другое всплывающее окно и закроет первое… То же самое и со вторым всплывающим окном.Когда пользователь находится во втором всплывающем окне, для входа есть другой href…

Код для запуска всплывающей модели входа

 <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');
});
  

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

удалите # из селектора:

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