1

подскажите пожалуйста, как вызывать разные модальные окна? То-есть стилизация модального окна одна, а содержимое будет разное. Например модальное окно №1 "Узнайте стоимость проекта" , окно №2 "Закажите обратный звонок".

Кнопки вызова окна

<a href="javascript:" class="get-bg_btn open-modal">Стоимость проекта</a>
<a href="javascript:" class="get-bg_btn open-modal">Обратный звонок</a>

Разметка модального окна

<div class="modal-overlay">
  <div class="modal">
    
    <a class="close-modal">
      <svg viewBox="0 0 20 20">
        <path fill="#ffffff" d="M15.898,4.045c-0.271-0.272-0.713-0.272-0.986,0l-4.71,4.711L5.493,4.045c-0.272-0.272-0.714-0.272-0.986,0s-0.272,0.714,0,0.986l4.709,4.711l-4.71,4.711c-0.272,0.271-0.272,0.713,0,0.986c0.136,0.136,0.314,0.203,0.492,0.203c0.179,0,0.357-0.067,0.493-0.203l4.711-4.711l4.71,4.711c0.137,0.136,0.314,0.203,0.494,0.203c0.178,0,0.355-0.067,0.492-0.203c0.273-0.273,0.273-0.715,0-0.986l-4.711-4.711l4.711-4.711C16.172,4.759,16.172,4.317,15.898,4.045z"></path>
      </svg>
    </a><!-- close modal -->

    <div class="modal-content">

        <div class="modal-header">
            <h3>Закажите расчет стоимости проекта</h3>
            <span>
                и мы свяжемся с Вами в течении дня
            </span>
        </div>

        <div class="contact-content">
            
        </div>          
    </div><!-- content -->
    
  </div><!-- modal -->
</div>

JavaScript код

var elements = $('.modal-overlay, .modal');

    $('.open-modal').click(function(){
        elements.addClass('active');
    });


    $('.close-modal').click(function(){
        elements.removeClass('active');
        $('iframe').attr('src', $('iframe').attr('src'));
    });

1 ответ 1

1

Вариантов как это сделать много, можете передавать в функцию показа модального окна контент для данного окна, простейший пример:

function ShowModal(params) {  
  const modal = document.querySelector('.modal')   
  document.querySelector('.modal-header').innerHTML = `<h2>${params.header}</h2>`
  document.querySelector('.modal-body').innerHTML = `<p>${params.body}</p>`
  document.querySelector('.modal-footer').innerHTML = params.footer

  modal.style.display = "block"
}
.modal {
  display: none;
  position: absolute;
  margin-left:-200px;
  left:50%;
  width: 400px;
  border:1px solid black;
  border-radius: 4px;
  text-align: center;
}
<a href="#" onclick="ShowModal({ header:'Modal № 1', body:'Text Body 1', footer: 'Footer Text 1' })">modal_1</a>
<a href="#" onclick="ShowModal({ header:'Modal № 2', body:'Text Body 2', footer: 'Footer Text 2' })">modal_2</a>

<div class='modal'>
  <div class="modal-header"></div>
  <div class="modal-body"></div>
  <div class="modal-footer"></div>
</div>

2
  • Возможно для простого модального окна такой вариант подойдет, но в моем случае модальное окно содержит форму связи, то-есть получается форму надо прописывать в <a href="#" onclick="ShowModal({ body:'Text Body 1' , что есть не очень удобно. Но всё равно спасибо за ваше решение. 23 мая 2021 в 18:34
  • @АндрейКурусь, тогда думаю вам стоит уточнить, что и как конкретно вы хотите сделать, ведь форма это тот же самый контент, что мешает поместить ее в модальное окно?
    – haswell
    25 мая 2021 в 15:10

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.