@IIITRIX

Как сделать модальное окно на Js?

Как правильно сделать модальное окно на javascript?
Допустим, у меня есть базовый шаблон модального окна
<div class="modal">
    <div class="modal_content">
      <span class="close_modal_window">×</span>
      <p>Модальное окно!</p>
    </div>
  </div>


По умолчанию, должен быть виден только базовый. Но при клике на вызов определенного окна, мы меняем содержимое тега
в реакте это можно было сделать типо так
<div class="modal">
    <div class="modal_content">
      <span class="close_modal_window">×</span>
      <p><b>{this.props.children}</b></p>
    </div>
  </div>


Как это сделать на js или jquery
  • Вопрос задан
  • 139 просмотров
Решения вопроса 2
AntonLitvinenko
@AntonLitvinenko
HTML coder
есть 10 кнопок и одно модальное окно и в него в зависимости от кнопки нужно передать контент? во таком случае к каждой кнопке тем или иным образом нужно этот контент привязать, чтобы дотянуться до него через this. например 10 секций с контентом, и в каждой секции есть кнопка. получаем при нажатии кнопки ее родителя, например, секцию. далее ищем уже внутри нее контент и вставляем его в модалку
чтото типа
$('.open-modal-btn').on('click', function (e) {
	e.preventDefault();
	var $content = $(this).parents('.cf7-section').find('.cf7-content').html();//получаем родителя и ищем в нем контент
	$('#call-to-action').find('.modal-content-wrapper').html($content); //в модалке ищем место для вставки
	var $target = $(this).attr('data-target');
	openModal($target);
});
Ответ написан
Комментировать
ArsenyMatytsyn
@ArsenyMatytsyn Куратор тега JavaScript
Руководитель frontend направления, предприниматель
Напиши функцию, объект или класс (по сути то, что в реакте или любом другом подобном фрейме или либе), который будет принимать параметра входящие и на выходе рисовать модалку с нужным контентом.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы