dynamic-interaction
Version:
Dynamic interaction 动态交互mcp，用于cursor、windsurf、trae 等 AI 智能编辑器 Agent 运行时交互使用
50 lines • 1.5 kB
JavaScript
/**
* 模态框组件
* 处理图片预览模态框
*/
import { getElementById } from '../utils/dom.js';
class ModalComponent {
modal = null;
modalImage = null;
isInitialized = false;
openModal(src) {
if (!this.isInitialized) {
this.initialize();
}
if (this.modal && this.modalImage) {
this.modal.style.display = 'flex';
this.modalImage.src = src;
}
}
closeModal() {
if (this.modal) {
this.modal.style.display = 'none';
}
}
initialize() {
this.modal = getElementById('image-modal');
this.modalImage = getElementById('modal-image');
const closeModalBtn = document.querySelector('.close-modal-btn');
if (closeModalBtn) {
closeModalBtn.addEventListener('click', () => this.closeModal());
}
if (this.modal) {
this.modal.addEventListener('click', (event) => {
if (event.target === this.modal) {
this.closeModal();
}
});
}
document.addEventListener('keydown', (event) => {
if (event.key === 'Escape' && this.modal && this.modal.style.display === 'flex') {
this.closeModal();
}
});
this.isInitialized = true;
}
}
const modalComponent = new ModalComponent();
export function openModal(src) {
modalComponent.openModal(src);
}
//# sourceMappingURL=modal.js.map