Почему анимация по разному реагирует на кнопки с одинаковыми классами?

Question

Есть модальное окно, которое открывается с двух кнопок и использует простую анимацию. Закрыть модальное окно также можно двумя кнопками, если просто через "Х" то анимация работает так как должна. если нажать send message, то просто закрывает модальное окно без анимации, хотя класы у них одинаковые. часть проектна можна глянуть в firebase

код ниже

$(function() {
    $("[data-scroll]").on("click", function(event){
        event.preventDefault();

        blockId = $(this).data('scroll');
        blockOffset = $(blockId).offset().top;

        $("html, body").animate({
            scrollTop: blockOffset - 50
        }, 700);

    });

    $("[data-modal]").on("click", function(event){
        event.preventDefault();

        $(modal_window).addClass('show');

    });

    $(document.querySelector(".close_modal")).on("click", function() {
        $(modal_window).removeClass('show');
    });
});

.header_nav > a, .lang_select > select {
  font-family: "TT Firs Neue", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  color: #111A45;
  text-decoration: none;
}

.header_section {
  font-family: "TT Firs Neue", sans-serif;
  font-style: normal;
  color: #FFFFFF;
}
.header_section h3 {
  font-weight: 500;
  font-size: 7.6rem;
  line-height: 100%;
}
.header_section p {
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 140%;
}

.modal_window > h4 {
  font-family: "TT Firs Neue", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 2.1rem;
  background: linear-gradient(103.85deg, #F33F5E 0%, #FA8550 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.modal_window > h2 {
  font-family: "TT Firs Neue", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 3.6rem;
  line-height: 4.6rem;
  color: #111A45;
}

#name, #mail, #message {
  font-family: "TT Firs Neue", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.1rem;
  color: #111A45;
}

.first_right {
  font-family: "TT Firs Neue", sans-serif;
  font-style: normal;
  color: #111A45;
}
.first_right h3 {
  font-family: "TT Firs Neue", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 4.8rem;
  line-height: 6.2rem;
  background: linear-gradient(103.85deg, #F33F5E 0%, #FA8550 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.first_right h4 {
  font-weight: 500;
  font-size: 2rem;
  line-height: 150%;
}
.first_right p {
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 150%;
}

.section_second h3 {
  font-family: "TT Firs Neue", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 4.8rem;
  line-height: 6.2rem;
  background: linear-gradient(103.85deg, #F33F5E 0%, #FA8550 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.wrap_inside {
  font-family: "Gilroy", sans-serif;
  font-style: normal;
}
.wrap_inside h4 {
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 2.9rem;
  color: #111A45;
}
.wrap_inside p {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 150%;
  color: #6E748E;
}

*, ::after, ::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  background: #FFFFFF;
  padding: 0;
  letter-spacing: 0;
  width: 160rem;
  margin: 0 auto;
}

header {
  width: 161rem;
  margin: 0 auto;
  position: relative;
}

.orange_btn {
  font-family: "TT Firs Neue", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 100%;
  color: #FFFFFF;
  width: 17rem;
  height: 5rem;
  background: linear-gradient(103.85deg, #F33F5E 0%, #FA8550 100%);
  border-radius: 3rem;
  border: none;
  cursor: pointer;
}

.blue_btn {
  font-family: "TT Firs Neue", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 100%;
  color: #FFFFFF;
  background: #111A45;
  border-radius: 3rem;
  width: 22rem;
  height: 6rem;
  border: none;
  cursor: pointer;
}

.header_nav {
  display: flex;
  flex-direction: row;
  padding: 2.5rem 0;
  align-items: center;
  margin-left: 10rem;
  margin-right: 10rem;
  position: relative;
}
.header_nav > img {
  margin-right: 16rem;
}
.header_nav .lang_select {
  margin-left: 13rem;
  position: relative;
}
.header_nav .lang_select > img {
  position: absolute;
  top: -0.2rem;
  left: -2.5rem;
}
.header_nav .lang_select label > select {
  border: none;
  margin-right: 3rem;
  outline: 0;
}
.header_nav .lang_select label > select > option {
  padding: 1rem;
}

.header_nav > a:not(:last-of-type) {
  margin-right: 5rem;
}

.header_section {
  background: linear-gradient(103.85deg, #F33F5E 0%, #FA8550 56.31%, #FA50A2 98.48%);
  border-radius: 6rem;
  margin: 0 6rem 12rem;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.header_section > img {
  position: absolute;
  bottom: 0;
  right: 0;
}
.header_section h3 {
  margin: 17rem 90.5rem 1.5rem 9.5rem;
}
.header_section p {
  margin: 0 90.5rem 2.5rem 9.5rem;
}
.header_section button {
  margin-left: 9.5rem;
  margin-bottom: 15rem;
  position: relative;
  text-align: left;
  padding-left: 5rem;
}
.header_section button > img {
  position: absolute;
  top: 2.5rem;
  right: 5.5rem;
}

.modal_window_wrap {
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.8);
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 1s;
}

.modal_window {
  position: absolute;
  right: 0;
  top: 0;
  width: 50rem;
  height: 100%;
  background: #FFFFFF;
  padding: 17rem 5rem 0 5rem;
  display: flex;
  flex-direction: column;
}
.modal_window form > label > input::placeholder {
  color: #111A45;
  border: none;
}
.modal_window > h4 {
  margin-bottom: 1rem;
}
.modal_window > h2 {
  margin-bottom: 3rem;
}
.modal_window > img {
  width: 2.6rem;
  height: 2.6rem;
  position: absolute;
  top: 4rem;
  right: 4rem;
  cursor: pointer;
}
.modal_window #name, .modal_window #mail {
  width: 40rem;
  height: 5.2rem;
  border-radius: 3rem;
  background: #F4F4F4;
  border: none;
  padding: 1.5rem 0 1.5rem 3rem;
  margin-bottom: 3rem;
  outline: none;
}
.modal_window #message {
  width: 40rem;
  height: 12rem;
  border-radius: 3rem;
  background: #F4F4F4;
  border: none;
  padding: 0 0 1.5rem 3rem;
  margin-bottom: 3rem;
  outline: none;
}
.modal_window button {
  width: 21rem;
  height: 5rem;
}

.show {
  opacity: 1;
  visibility: visible;
  transition: all 1s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
    <div class="header_nav">
        <img src="img/header_logo.png" alt="logo">
        <a href="#" data-scroll="#technology">Technology</a>
        <a href="#" data-scroll="#Advantages">Advantages</a>
        <a href="#" data-scroll="#How it works">How it works</a>
        <a href="#" data-scroll="#Packages">Packages</a>
        <a href="#" data-scroll="#Contact">Contact</a>
        <div class="lang_select">
            <img src="img/lang_ico.svg" alt="lang_ico">
            <label>
                <select>
                    <option value="0">ENG</option>
                    <option value="1">UKR</option>
                    <option value="2">PL</option>
                </select>
            </label>
        </div>
        <button type="submit" class="orange_btn" data-modal="#modal_window">Get started</button>
    </div>
    <div class="header_section">
        <h3 class="header_section_title">MapStars Technology</h3>
        <p>Get new customers regularly with the help of modern technologies</p>
        <button type="submit" class="blue_btn" data-modal="#modal_window">Get started<img
                src="img/right_arrow_white.svg" alt="white arrow">
        </button>
        <img src="img/header_bg.png" alt="bg">
    </div>
    <div class="modal_window_wrap" id="modal_window">
        <div class="modal_window">
            <h4>Contact Form</h4>
            <h2>Drop Us a Line.</h2>
            <img src="img/close_btn.svg" alt="close" class="close_modal">
            <form action="">
                <label for="name"><input type="text" id="name" name="firstname" placeholder="First Name*"></label>
                <label for="mail"><input type="email" name="mail" id="mail" placeholder="E-mail*"></label>
                <label for="message"><input type="text" name="message" id="message" placeholder="Message..."></label>
                <button type="submit" class="close_modal orange_btn">Send a Message</button>
            </form>
        </div>
    </div>
</header>

БЛОГ НА HUSL

Почему анимация по разному реагирует на кнопки с одинаковыми классами?

Ответы (0 шт):