制作css项目中弹出提示框的方法

<button id="openTooltip">点击显示提示框</button>

<div class="tooltip-modal" id="tooltipModal">

立即学习“前端免费学习笔记（深入）”；

  <div class="tooltip-content">

    <span class="close-btn" id="closeBtn">×</span>

    <h3>提示信息</h3>

    <p>这是一条重要的提示内容。</p>

  </div>

</div>

.tooltip-modal {

  display: none;

  position: fixed;

  top: 0; left: 0;

  width: 100%; height: 100%;

  background-color: rgba(0, 0, 0, 0.5);

  justify-content: center;

  align-items: center;

  z-index: 1000;

}

.tooltip-content {

  background: white;

  padding: 20px;

  border-radius: 8px;

  box-shadow: 0 4px 12px rgba(0,0,0,0.2);

  max-width: 300px;

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

34

查看详情

  text-align: center;

  position: relative;

}

.close-btn {

  position: absolute;

  top: 10px; right: 15px;

  font-size: 24px;

  cursor: pointer;

}

const openBtn = document.getElementById('openTooltip');

const modal = document.getElementById('tooltipModal');

const closeBtn = document.getElementById('closeBtn');

openBtn.onclick = function() {

  modal.style.display = 'flex';

}

closeBtn.onclick = function() {

  modal.style.display = 'none';

}

window.onclick = function(event) {

  if (event.target === modal) {

    modal.style.display = 'none';

  }

}