JSFiddle - React, Tailwind, and code Playground

by Sergey khorev

HTML

<!-- Используется как тестовый заказ -->
	<div class="modal-layer" id="reset-modal-test-request">
		<div class="modal__wrapper small__modal">
			<img src="<?=SITE_TEMPLATE_PATH;?>/img/large__logo.svg" alt="Logo" style="max-width: 150px;">
			<h3 class="subtitle">Пробный заказ</h3>
			<p class="medium__text text-center">Укажите ваши данные для пробного заказа.</p>
			<button class="icon__button modal_close__btn">
				<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
					<path fill-rule="evenodd" clip-rule="evenodd" d="M8.70708 7.29243C8.51848 7.11027 8.26588 7.00948 8.00368 7.01176C7.74148 7.01403 7.49067 7.1192 7.30526 7.30461C7.11985 7.49002 7.01469 7.74083 7.01241 8.00303C7.01013 8.26523 7.11092 8.51783 7.29308 8.70643L10.5861 11.9994L7.29308 15.2924C7.19757 15.3847 7.12139 15.495 7.06898 15.617C7.01657 15.739 6.98898 15.8703 6.98783 16.003C6.98668 16.1358 7.01198 16.2675 7.06226 16.3904C7.11254 16.5133 7.18679 16.6249 7.28069 16.7188C7.37458 16.8127 7.48623 16.887 7.60913 16.9373C7.73202 16.9875 7.8637 17.0128 7.99648 17.0117C8.12926 17.0105 8.26048 16.9829 8.38249 16.9305C8.50449 16.8781 8.61483 16.8019 8.70708 16.7064L12.0001 13.4134L15.2931 16.7064C15.4817 16.8886 15.7343 16.9894 15.9965 16.9871C16.2587 16.9848 16.5095 16.8797 16.6949 16.6942C16.8803 16.5088 16.9855 16.258 16.9878 15.9958C16.99 15.7336 16.8892 15.481 16.7071 15.2924L13.4141 11.9994L16.7071 8.70643C16.8892 8.51783 16.99 8.26523 16.9878 8.00303C16.9855 7.74083 16.8803 7.49002 16.6949 7.30461C16.5095 7.1192 16.2587 7.01403 15.9965 7.01176C15.7343 7.00948 15.4817 7.11027 15.2931 7.29243L12.0001 10.5854L8.70708 7.29243Z" fill="#242529"/>
				</svg>
			</button>
			<form class="modal__form form__call" method="post">
				<input type="hidden" name="form_title" value="Пробный заказ">
				<div class="input__wrapper">
					<label for="name" class="label small__text darkgrey__text">Ваше имя</label>
					<input type="text" id="name" name="name" class="input...

CSS

#reset-modal-test-request {
    display: none;
}

JavaScript

document.addEventListener('DOMContentLoaded', function() {
    const openModalButton = document.getElementById('test-order-btn');
    const modal = document.getElementById('reset-modal-test-request');
    const closeModalButton = modal.querySelector('.modal_close__btn');
    
    // Открытие модального окна
    openModalButton.addEventListener('click', function() {
        modal.style.display = 'block'; // Показываем модальное окно
    });
    
    // Закрытие модального окна
    closeModalButton.addEventListener('click', function() {
        modal.style.display = 'none'; // Скрываем модальное окно
    });
    
    // Закрытие по клику вне окна
    window.addEventListener('click', function(event) {
        if (event.target === modal) {
            modal.style.display = 'none';
        }
    });
});