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

Question

[IIITRIX]

Как правильно сделать модальное окно на 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

Answer 1

[Антон Литвиненко]

есть 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);
});

Answer 2

[Арсений Матыцин]

Напиши функцию, объект или класс (по сути то, что в реакте или любом другом подобном фрейме или либе), который будет принимать параметра входящие и на выходе рисовать модалку с нужным контентом.