Всплываюшая попап форма

Popup form

<?
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");
$APPLICATION->SetTitle("Тестовый");
?>

 
<div class="popups__inner active">
        <div class="popup popup__callback">
            <div class="close_popup">x</div>
            <h3>Обратная связь</h3>
            <p>Отправьте заявку и мы свяжемься с Вами в ближайшее время</p>
        
            <form action="">
                <input type="text" name="lastName" placeholder="Фамилия">
                <input type="text" name="firstName" placeholder="Имя">
                <input type="text" name="secondName" placeholder="Отчество">
                <input type="text" name="email" placeholder="E-mail">
                <input type="text" name="phone" placeholder="Телефон">
                <input type="text" name="projectName" placeholder="Название проекта">
                <input type="text" name="projectDescription" placeholder="Описание проекта">
            
                <input type="submit" class="popup__callback-btn" value="Отправить">

            
            </form>
        </div>
      </div>


      <style>
        .popups__inner {
            display: none;
            position: fixed;
            top: 0;
            width: 100%;
            height: 100%;
            justify-content: center;
            align-items: center;
            z-index: 100;
        }


        .close_popup {
            position: absolute;
            top: 5px;
            right: 15px;
            font-size: 30px;
            color: #5b5b5b;
            cursor: pointer;
        }


        .popups__inner.active {
            display: flex;
        }



        .popup__callback input {
            display: block;
            margin: 0 auto 15px;
            width: 340px;
            border: 1px solid #afafaf;
            border-radius: 10px;
            padding: 10px 25px;
        }


        .popup__callback-btn {
            margin-bottom: 0;
        }


        .popup__callback {
            position: relative;
            width: 500px;
            max-width: 100%;
            margin: 0 auto;
            padding: 30px 80px;
            text-align: center;
            background: #ececec;
            border-radius: 15px;
        }


        .popup__callback form {
            margin-top: 25px;
        }


        .popup__callback h3 {
            font-size: 27px;
            text-transform: uppercase;
            font-weight: 600; 
        }


        .popup__callback p {
            margin-top: 5px;
        }
      </style>



<script>
    $(function() {
        $('.btn').on('click', function() {
            $('.popups__inner').addClass('active');
        });

        $('.close_popup').on('click', function() {
            $('.popups__inner').removeClass('active');
        });
    });
</script>

<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");?>