Odoo网站自定义卡片：点击触发独立可编辑Modal弹窗需求

核心思路 #

给每个卡片绑定唯一的弹窗实例，通过标识关联卡片与弹窗，弹窗内容直接在HTML中静态编写，满足独立定制需求。

1. HTML结构设计 #

先搭建卡片组和对应的弹窗容器，用data-modal-id属性把卡片和弹窗关联起来，方便点击时匹配：

<!-- 卡片组 -->
<div class="card-container">
  <!-- 卡片1 -->
  <div class="card" data-modal-id="modal-1">
    <img src="card1-img.jpg" alt="卡片1图片">
    <h3>卡片1标题（可静态编辑）</h3>
    <p>卡片1文本内容（可静态编辑）</p>
  </div>

  <!-- 卡片2 -->
  <div class="card" data-modal-id="modal-2">
    <img src="card2-img.jpg" alt="卡片2图片">
    <h3>卡片2标题（可静态编辑）</h3>
    <p>卡片2文本内容（可静态编辑）</p>
  </div>

  <!-- 卡片3、4同理 -->
</div>

<!-- 弹窗容器 -->
<!-- 弹窗1：标题固定为Hello World -->
<div class="modal" id="modal-1">
  <div class="modal-overlay"></div>
  <div class="modal-content">
    <button class="modal-close">&times;</button>
    <h2>Hello World</h2>
    <p>弹窗1专属内容，直接在这里静态编辑即可</p>
    <img src="modal1-img.jpg" alt="弹窗1图片">
  </div>
</div>

<!-- 弹窗2：标题固定为Messi is best -->
<div class="modal" id="modal-2">
  <div class="modal-overlay"></div>
  <div class="modal-content">
    <button class="modal-close">&times;</button>
    <h2>Messi is best</h2>
    <p>弹窗2专属内容，按需静态修改</p>
    <img src="modal2-img.jpg" alt="弹窗2图片">
  </div>
</div>

<!-- 弹窗3、4：自定义标题和内容 -->
<div class="modal" id="modal-3">
  <div class="modal-overlay"></div>
  <div class="modal-content">
    <button class="modal-close">&times;</button>
    <h2>自定义弹窗3标题</h2>
    <p>弹窗3的专属内容</p>
  </div>
</div>

2. CSS基础样式 #

实现弹窗的显示/隐藏逻辑，以及基础布局：

/* 默认隐藏弹窗 */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

.modal-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
}

.modal-content {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 2rem;
  border-radius: 8px;
  width: 80%;
  max-width: 600px;
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  border: none;
  background: transparent;
  font-size: 1.5rem;
  cursor: pointer;
}

/* 卡片样式，按需调整 */
.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  padding: 2rem;
}

.card {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 1rem;
  cursor: pointer;
  transition: box-shadow 0.2s;
}

.card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

3. JavaScript交互逻辑 #

监听卡片点击事件，显示对应弹窗；同时支持点击关闭按钮或遮罩层关闭弹窗：

// 获取所有卡片和弹窗元素
const cards = document.querySelectorAll('.card');
const modals = document.querySelectorAll('.modal');
const closeButtons = document.querySelectorAll('.modal-close');
const overlays = document.querySelectorAll('.modal-overlay');

// 卡片点击事件：显示对应弹窗
cards.forEach(card => {
  card.addEventListener('click', () => {
    const modalId = card.getAttribute('data-modal-id');
    document.getElementById(modalId).style.display = 'block';
  });
});

// 关闭按钮事件：隐藏弹窗
closeButtons.forEach(btn => {
  btn.addEventListener('click', () => {
    btn.closest('.modal').style.display = 'none';
  });
});

// 遮罩层点击事件：隐藏弹窗
overlays.forEach(overlay => {
  overlay.addEventListener('click', () => {
    overlay.closest('.modal').style.display = 'none';
  });
});

4. 静态编辑说明 #

• 弹窗的标题、文本、图片都直接在HTML的modal-content里修改即可，比如第一个弹窗的<h2>Hello World</h2>，第二个的<h2>Messi is best</h2>，第三、四个弹窗按需自定义内容。
• 卡片本身的静态编辑逻辑保持你原有实现即可，不影响弹窗功能。

内容的提问来源于stack exchange，提问作者Shehabul Alam