<div id="open-modal-btn" class="banner-text-btn">
          <div><button>Оставить заявку</button></div>
          <div id="modal-application" class="modal">
    <div class="modal-box">
        <button class="modal-close-btn" id="close-modal-application">
        <svg width="23" height="25" viewBox="0 0 23 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M2.09082 0.03125L22.9999 22.0294L20.909 24.2292L-8.73579e-05 2.23106L2.09082 0.03125Z"
                        fill="#333333" />
                    <path d="M0 22.0295L20.9091 0.0314368L23 2.23125L2.09091 24.2294L0 22.0295Z" fill="#333333" />
                </svg>
        </button>
        <h1>Заявка</h1>
        <div cr-field="name" class="is-text">
            <div class="name">
                Имя *
            </div>
            <div class="input">
                <input type="text" il-action="listen" autocomplete="name" class="form-control" value="">
            </div>
        <div cr-field="phone" class="is-text">
            <div class="name">
                Номер телефона *
            </div>
            <div class="input">
                <input type="text" il-action="listen" autocomplete="tel" class="form-control" value="">
            </div>
        </div>
        <div cr-field="text" class="is-text">
            <div class="name">
                Город
            </div>
            <div class="input">
                <input type="text" il-action="listen" class="form-control cr-field-input" value="">
            </div>
            </div>
        </div>
          <script src="js/modal-application.js"></script>
        </div>

@font-face {
  font-family: "TTNorms";
  src: url(font/TTNorms-Medium.otf);
}
@font-face {
  font-family: "OpenSans";
  src: url(font/OpenSans.ttf);
}
* {
  box-sizing: border-box;
  font-family: "OpenSans";
  padding: 0;
  margin: 0;
}
a {
  text-decoration: none;
  color: black;
}
li {
  list-style-type: none;
}
.container {
  width: 1130px;
  margin: 0 auto;
}
.modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: 99998;
    background-color: rgba(0, 0, 0, .3);
    display: grid;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transition: opacity .4s, visibility .4s;
}
.modal-box {
    position: relative;
    max-width: 500px;
    padding: 45px;
    z-index: 1;
    background-color: white;
    margin: 30px 15px;
    transform: scale(0);
    transition: transform .8s;
}
.modal-close-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    border: none;
    background-color: transparent;
    padding: 5px;
}
.modal-close-btn svg path {
    transition: fill .4s;
}

.modal-close-btn:hover svg path {
    fill: rgb(255, 203, 87);
}

.modal-close-btn:active svg path {
    fill: rgb(186, 53, 0);
}
.modal.open {
    visibility: visible;
    opacity: 1;
}
.modal.open .modal-box {
    transform: scale(1);
}

document.getElementById("open-modal-btn").addEventListener("click",function() {
    document.getElementById("modal-application").classList.add("open")
})

document.getElementById("close-modal-application").addEventListener("click",function() {
    document.getElementById("modal-application").classList.remove("open")
})
// Закрыть модальное окно при нажатии на Esc
window.addEventListener('keydown', (e) => {
    if (e.key === "Escape") {
        document.getElementById("modal-application").classList.remove("open")
    }
});

// Закрыть модальное окно при клике вне его
document.querySelector("#modal-application .modal-box").addEventListener('click', event => {
    event._isClickWithInModal = true;
});
document.getElementById("modal-application").addEventListener('click', event => {
    if (event._isClickWithInModal) return;
    event.currentTarget.classList.remove('open');
});