**PageOffice版本：V6.7.0.1版本**
- [查看本示例演示效果](https://www.bilibili.com/video/BV1YMXWBSEPN)

PageOffice V6.3版本起，PageOffice客户端控件新增Enabled属性，对采用标准div技术实现的界面元素，如模态对话框、弹出菜单及下拉选择框，给予了更佳的支持，确保这些元素不再受控件遮蔽影响。
`<object>` 标签在HTML中用于嵌入各种类型的媒体，比如Flash动画、PDF文件、Java小程序等。它是一个独立的元素，其内容通常不受页面上的CSS样式的影响，包括`z-index`属性。`z-index`属性是用来设置元素的垂直堆叠顺序的，值越大，元素在堆叠中越靠上。然而，对于`<object>`标签来说，由于其嵌入内容的性质，它可能不会像其他HTML元素那样响应`z-index`属性。PageOffice客户端控件在页面的HTML代码中也是这样的一个`<object>` 标签，所以在设计用PageOffice在线打开文件的网页时，就可能出现在线打开的文档遮挡了页面上其他元素的情况，尤其是当试图用`div`元素创建弹窗或覆盖层时，即使为这些`div`元素设置了较高的`z-index`值，PageOffice控件仍然会显示在它们上面，导致遮挡问题。根本原因是`<object>`标签嵌入的是浏览器插件，然而插件的渲染通常是由浏览器插件系统处理的，而不是HTML渲染引擎，这就导致了插件内容不受`z-index`控制。
PageOffice V6.3版本的客户端控件提供了Enabled属性，在弹出模态对话框、弹出菜单或者下拉框的时候，通过js代码`pageofficectrl.Enabled = false;`设置客户端PageOffice控件不要显示在最上层，等对话框关闭或下拉菜单消失时，再通过js代码`pageofficectrl.Enabled = true;`恢复PageOffice控件的正常显示，完美的解决了在使用前端框架的情况下PageOffice遮挡了div技术实现的模态对话框和弹出菜单的问题。

### 前端代码

比如使用vue3框架弹出对话框的代码如下：
```
<script setup>
import request from '@/utils/request';
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus';
import { ElMessageBox } from 'element-plus';

const poHtmlCode = ref('');
const dialogTableVisible = ref(false);

function dialog_open() {
	pageofficectrl.Enabled = false;//禁用 PageOffice 控件的显示
	dialogTableVisible.value = true;//显示对话框元素
}

function dialog_close() {
	pageofficectrl.Enabled = true;//启用 PageOffice 控件的显示
	dialogTableVisible.value = false;//隐藏对话框元素
}


function OnPageOfficeCtrlInit() {
	// PageOffice的初始化事件回调函数，您可以在这里添加自定义按钮
	pageofficectrl.AddCustomToolButton("弹出模态窗口", "dialog_open()", 0);
}

function openFile() {
	return request({
		url: '/DivMessage/Word',
		method: 'get',
	})
}

onMounted(() => {
	// 请求后端打开文件
	openFile().then(response => {
		poHtmlCode.value = response;
	});
	//将需要回调的函数挂载到PageOffice控件，例如控件触发的事件、自定义按钮触发的函数。
	window.POPageMounted = { OnPageOfficeCtrlInit,dialog_open };//其中OnPageOfficeCtrlInit必须

})
</script>

<template>
	<div class="Word">

		<el-dialog v-model="dialogTableVisible" title="普通模态框" @close="dialog_close" @open="dialog_open">
			<p>一个普通的页面层，传入了自定义的 HTML</p>
		</el-dialog>

		
		<div style="width:auto; height:900px;" v-html="poHtmlCode"></div>
	</div>
</template>
```

参考链接：[弹出各种样式的消息框及菜单 | PageOffice 开发者中心](https://pageoffice.cn/pages/7bb96a/)

PageOffice V6.3版本起，PageOffice客户端控件新增Enabled属性，对采用标准div技术实现的界面元素，如模态对话框、弹出菜单及下拉选择框，给予了更佳的支持，确保这些元素不再受控件遮蔽影响。<object> 标签在HTML中用于嵌入各种类型的媒体，比如Flash动画、PDF文件、Java小程序等。它是一个独立的元素，其内容通常不受页面上的CSS样式的影响，包括z-index属性。z-index属性是用来设置元素的垂直堆叠顺序的，值越大，元素在堆叠中越靠上。然而，对于<object>标签来说，由于其嵌入内容的性质，它可能不会像其他HTML元素那样响应z-index属性。PageOffice客户端控件在页面的HTML代码中也是这样的一个<object> 标签，所以在设计用PageOffice在线打开文件的网页时，就可能出现在线打开的文档遮挡了页面上其他元素的情况，尤其是当试图用div元素创建弹窗或覆盖层时，即使为这些div元素设置了较高的z-index值，PageOffice控件仍然会显示在它们上面，导致遮挡问题。根本原因是<object>标签嵌入的是浏览器插件，然而插件的渲染通常是由浏览器插件系统处理的，而不是HTML渲染引擎，这就导致了插件内容不受z-index控制。PageOffice V6.3版本的客户端控件提供了Enabled属性，在弹出模态对话框、弹出菜单或者下拉框的时候，通过js代码pageofficectrl.Enabled = false;设置客户端PageOffice控件不要显示在最上层，等对话框关闭或下拉菜单消失时，再通过js代码pageofficectrl.Enabled = true;恢复PageOffice控件的正常显示，完美的解决了在使用前端框架的情况下PageOffice遮挡了div技术实现的模态对话框和弹出菜单的问题。

PageOfficeV6.7.0.1弹出消息框及菜单

前端

开发工具

客户端

PageOffice V6.3新增Enabled属性，解决在线编辑文档遮挡div模态框、弹窗及下拉菜单问题。通过设置pageofficectrl.Enabled=false/true，在弹窗开启时禁用控件显示，关闭后恢复，完美兼容Vue3等前端框架，确保页面交互流畅。

代码解释

Java

2026上云采购 | AI焕新·智启新局

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

PageOfficeV6.7.0.1弹出消息框及菜单-腾讯云开发者社区-腾讯云

PageOfficeV6.7.0.1弹出消息框及菜单

PageOfficeV6.7.0.1弹出消息框及菜单

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐