javascript - 如何改变模态内容(无需 Bootstrap )

Question

我有一堆内容，它们都触发相同的模式。还有另一种方法可以改变模式而无需在 HTML 中重复相同的代码吗？

我尝试使用 event.latedTarget，但没有成功。

此外，模态框由另一个 ID 为 modalBtn 的 div 触发。

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>

Answer 1

您可以为事件监听器使用代理方法或 lambda 表达式(或匿名函数)，并将参数传递给模态显示函数，以便改变模态元素中的内容。

当您将函数注册为 EventListener 的回调时，您必须提供函数引用，但不能直接调用它。这是因为，一旦实际事件被触发，EventListener 将调用该函数。只要调用回调函数的可变性继续存在，这就会限制您的选择。

如果您传递 lambda 表达式，而不是传递函数引用，那么您可以在 lambda 表达式内调用您想要的任何内容，并且只有在事件触发时调用 lambda 后，才会执行此操作。

这使您可以灵活地定义具有复杂参数签名的方法，这些方法可以作为事件触发的结果执行，但为每个唯一事件传递不同的参数。

还有其他几种方法可以做到这一点，但我认为这是完成任务的最干净的方法。

下面的示例展示了如何做到这一点:

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>