如何在自定义模态框内使用marker.js标注而非默认弹窗

要在现有自定义模态框内使用marker.js而不启用其自带弹窗，可通过以下步骤实现：

1. 初始化marker.js时指定自定义容器并禁用默认弹窗 #

在创建Marker实例时，通过container选项将标注容器挂载到你的模态框元素上，并启用renderInPlace选项让标注直接在目标元素区域内渲染：

// 假设你的模态框ID为"custom-modal"，目标图片元素为"target-image"
const targetImg = document.getElementById('target-image');
const modalContainer = document.getElementById('custom-modal');

const marker = new MarkerJS2.Marker(targetImg, {
  container: modalContainer,
  renderInPlace: true,
  uiPosition: 'top' // 可根据需求调整工具栏位置，可选值：top/bottom/left/right
});

2. 调整CSS修复定位问题 #

通过覆盖marker.js默认的容器样式，让其完全适配你的模态框布局：

/* 保留你原有的模态框样式 */
#custom-modal {
  visibility: visible;
  font-size: 16px;
  user-select: none;
  position: absolute;
  top: 118px;
  left: 26px;
  width: 620px;
  z-index: 5;
}

/* 强制marker.js容器占满模态框 */
.markerjs2-container {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 6 !important; /* 确保标注容器在模态框之上 */
}

/* 可选：自定义工具栏位置 */
.markerjs2-toolbar {
  top: 15px !important;
  right: 15px !important;
}

3. 注意事项 #

• 确保在模态框完全显示后再初始化marker.js，避免DOM未加载导致的容器绑定失败；
• 若模态框内的图片有缩放或定位，需同步调整marker.js的scale选项，确保标注坐标与图片匹配；
• 如果使用marker.js的旧版本（v1），语法略有不同，需对应调整初始化参数（如inline: true替代renderInPlace）。

内容的提问来源于stack exchange，提问作者Brian Kidd