Как изменить модальный контент (без начальной загрузки) - PullRequest
Новая
       8

Как изменить модальный контент (без начальной загрузки)

0 голосов
/ 15 апреля 2019

У меня есть куча содержимого, которое запускает один и тот же модал.Есть ли другой способ изменить модальное без повторения одного и того же кода в HTML?

Я пытался использовать event.relatedTarget, но без успеха.

Кроме того, модальное запускается другим div с id modalBtn . 

var modal = document.getElementById('modalSpeaker');
var modalBtn = document.getElementById('modalBtn');
var closeBtn = document.getElementsByClassName('closeBtn')[0];

modalBtn.addEventListener('click', openModal);
closeBtn.addEventListener('click', closeModal);

function openModal() {
  modal.style.display = 'block';
}

function closeModal() {
  modal.style.display = 'none';
}

    <div id="modalSpeaker" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <span class="closeBtn">&times;</span>
            </div>
            <div class="modal-body">
                <div class="modal-info">
                    <img src="images/speakers/speaker01.png" alt="">
                    <h3>Title</h3>
                    <span>About 01</span>
                    <span>About 02</span>
                </div>
                <div class="modal-about">
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam amet consequatur, asperiores blanditiis quis nobis quaerat non aperiam doloribus quae, voluptatibus fuga voluptate porro dolorum velit eaque fugiat autem. Aut.
                    </p>
                    <p>
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi animi non odit eaque, tempora et fugit vitae officia similique quidem, officiis quisquam esse ipsa enim numquam distinctio sapiente nostrum ratione.
                    </p>
                </div>
            </div>
        </div>
    </div>

1 Ответ

2 голосов
/ 15 апреля 2019

Вы можете использовать прокси-метод или лямбда-выражение (или анонимную функцию) для прослушивателя событий и передавать аргументы в функцию модального отображения для изменения содержимого в модальных элементах.

Когда вызарегистрировать функцию в качестве обратного вызова для EventListener, вы должны предоставить ссылку на функцию, но не вызывать ее напрямую.Это потому, что EventListener вызовет функцию, как только будет запущено фактическое событие.Это ограничивает ваши параметры, поскольку изменчивость продолжает вызывать вашу функцию обратного вызова.

Если вместо передачи ссылки на функцию вы передаете лямбда-выражение, то можете вызывать все, что захотите, внутри лямбда-выражения, и это будетбудет выполняться только после того, как лямбда будет вызвана при возникновении события.

Это дает вам гибкость в определении методов со сложными сигнатурами аргументов, которые могут быть выполнены в результате запуска события, но с другими аргументами, являющимисяпередается для каждого уникального события.

Есть также несколько других способов сделать это, но я вижу это как самый чистый способ выполнить вашу задачу.

В приведенном ниже примере показано, как это может бытьсделано: 

const modal = document.getElementById('modal');
const title = document.querySelector('#modal .title');

function openModal(color) {
  title.innerText = `Selected color: ${color}`;
  modal.style.display = 'block';
}

function closeModal() {
  modal.style.display = 'none';
}

document.getElementById('modal-close').addEventListener('click', closeModal);

const buttonG = document.getElementById('g-btn');
const buttonR = document.getElementById('r-btn');
const buttonB = document.getElementById('b-btn');

buttonG.addEventListener('click', () => openModal('Green'));
buttonR.addEventListener('click', () => openModal('Red'));
buttonB.addEventListener('click', () => openModal('Blue'));
div#modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 100px;
  background: whitesmoke;
  display: none;
}
<div id="container">
  <span class="title">Click one of the buttons to see the effect...</span>
</div>

<div id="modal">
  <div class="title"></div>
  <button type="button" id="modal-close">Close</button>
</div>

<button id="g-btn" type="button">Green</button>
<button id="r-btn" type="button">Red</button>
<button id="b-btn" type="button">Blue</button>
...