触发器打开全屏对话框从组件外部工作，如何在打开时关闭对话框

<!-- 触发器 -->
<button id="openDialogButton">打开对话框</button>

<!-- 全屏对话框组件 -->
<div id="fullscreenDialog">
  <button id="closeDialogButton">关闭对话框</button>
  <div class="content">
    <!-- 对话框内容 -->
  </div>
</div>

/* 全屏对话框样式 */
#fullscreenDialog {
  display: none; /* 初始状态隐藏对话框 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

/* 对话框内容样式 */
#fullscreenDialog .content {
  /* 根据需求设置内容样式 */
}

/* 关闭按钮样式 */
#closeDialogButton {
  position: absolute;
  top: 10px;
  right: 10px;
}

/* 其他样式 */

// 获取触发器和对话框元素
const openDialogButton = document.getElementById('openDialogButton');
const fullscreenDialog = document.getElementById('fullscreenDialog');
const closeDialogButton = document.getElementById('closeDialogButton');

// 触发器点击事件监听器
openDialogButton.addEventListener('click', () => {
  fullscreenDialog.style.display = 'block'; // 打开对话框
});

// 关闭按钮点击事件监听器
closeDialogButton.addEventListener('click', () => {
  fullscreenDialog.style.display = 'none'; // 关闭对话框
});