0

Здравствуйте! Имеется модальное окно с формой логина. Вопрос: как сделать чтобы при нажатии на кнопку lost password", first-form плавно смещался влево, а на его место справа влево выезжал див с классом second-form? Эффект, которого я хочу добиться можно увидеть здесь в форме входа, нажав на кнопку "забыли пароль?", но к сожалению, я не могу понять как оно реализовано. Ссылка черновик в кодпене.

* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
}
.modal-window {
  position: fixed;
  top: 10%;
  left: calc(50% - 190px);
  width: 380px;
  padding: 40px;
  box-shadow: 0 0 10px rgba(0,0,0,.5);
}
.first-form {
  min-height: 300px;
  background: rgba(0,0,0,.1);
}
.second-form {
  display: none;
  background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="modal-window">
    <div class="form first-form">
      Fields in first form;
      <a href="#close">lost password</a>
    </div>
    <div class="form second-form">
      email field
      <a href="#close">back</a>
    </div>
  </div>
</div>

1 ответ 1

1

Это набросок по примеру из вопроса. В идеале можно переписать код, сделав его более ёмким и красивым. Немного изменил разметку и стили.

$('.modal-window').on('click', '#lost-pass', function(e){     // обработка нажатия на ссылку в первом окне
  e.preventDefault();
  $(this).closest('.form').css('margin-left', '-380px');      // сдвиг окна влево отрицательным отступом
})
$('.modal-window').on('click', '#back', function(e){     // обработка нажатия на ссылку во втором окне
  e.preventDefault();
  $(this).closest('.form').prev().css('margin-left', '40px');      // возврат окна на изначальную позицию
})
* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
}
.wrapper {
  position: fixed;
  top: 10%;
  left: calc(50% - 190px);
  width: 380px;
  height: 380px;
  box-shadow: 0 0 10px rgba(0,0,0,.5);
  overflow: hidden;    /* скрывает второй блок за пределами основного контейнера */
}
.modal-window {
  width: 760px;    /* выстраивает оба блока в строку */
}
.first-form {
  float: left;    /* выстраивает оба блока в строку */
  width: 300px;
  height: 300px;
  min-height: 300px;
  background: rgba(0,0,0,.1);
  margin: 40px;
  transition: 0.5s;    /* добавляет анимацию для сдвига */
}
.second-form {
  float: left;    /* выстраивает оба блока в строку */
  width: 300px;
  height: 300px;
  min-height: 300px;
  background: #fff;
  margin: 40px;
  position: relative;
/*   left: 0; */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="modal-window">
    <div class="form first-form">
      Fields in first form;
      <a id="lost-pass" href="#close">lost password</a>
    </div>
    <div class="form second-form">
      email field
      <a id="back" href="#close">back</a>
    </div>
  </div>
</div>

1
  • а что, если у блоков разная высота и небходимо чтобы высота модального окна подстраивалась?
    – Игорь
    Commented 13 дек. 2016 в 7:21

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.