时间戳

首页 > 解决方案 > 如何改变模态内容（没有引导程序）

javascript - 如何改变模态内容（没有引导程序）

问题描述

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

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

此外，模态由另一个 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>

标签： javascriptjqueryhtmlmodal-dialog

解决方案

您可以为事件侦听器使用代理方法或 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>

推荐阅读