制作模态框（Modal）效果，我们需要 HTML 和 CSS 来实现。
首先，在 HTML 中创建模态框的结构。可以使用 div 元素用来包裹模态框的内容，并设置其样式为 “display: none;” 隐藏起来。同时，还需要添加遮罩层，用于遮盖页面的其他内容，突出显示模态框。
<div class="modal">
<div class="modal-content">
<!-- 模态框的内容 -->
</div>
</div>
<div class="modal-overlay"></div>接下来，在 CSS 中设置模态框的样式。模态框需要设置为固定定位，并居中显示。同时，还需要设置遮罩层的样式，使其充满整个页面并半透明显示。
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
z-index: 9999;
}
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9998;
}最后，通过 JavaScript 实现模态框的显示和隐藏。可以通过点击按钮或其他事件触发模态框的显示，并在需要关闭模态框时，设置模态框的样式为 “display: none;”。
const modal = document.querySelector('.modal');
const overlay = document.querySelector('.modal-overlay');
const showModalButton = document.querySelector('.show-modal-button');
const closeModalButton = document.querySelector('.close-modal-button');
showModalButton.addEventListener('click', function() {
modal.style.display = 'block';
overlay.style.display = 'block';
});
closeModalButton.addEventListener('click', function() {
modal.style.display = 'none';
overlay.style.display = 'none';
});通过上述步骤，我们就可以利用 HTML、CSS 和 JavaScript 实现模态框（Modal）的效果。