css 设置 :
引用换成自己就好
.overlay {z-index: 1000;cursor: none; /*设置为不可点击*/user-select: none; /*设置为不可选择*/contenteditable: false; /*设置为不可编辑*/draggable: false; /*设置为不可拖动*/position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.16);pointer-events: none;/* 为了让水印居中,可以使用 flex 布局 */display: flex;justify-content: center;align-items: center;}.overlay:before {content: "禁止操作"; /* 这里是水印的文本内容 */color: #ffffff; /* 文字颜色 */font-size: 7em; /* 文字大小,根据需要调整 */opacity: 0.5; /* 文字透明度,可以根据需求调整 */text-align: center;/* 下面的定位属性可以根据需要调整水印的位置 */position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);/* 添加这一行来使文字竖直排列 */writing-mode: vertical-rl;}.disabled-element {/*opacity: 0.6; !* 降低透明度,表示不可用 *!*/pointer-events: none; /* 禁止鼠标事件 */}
还有一个 添加两个 文字的 自行选择 :
.overlay {z-index: 1000;cursor: none;user-select: none;contenteditable: false;draggable: false;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.1);pointer-events: none;display: flex;justify-content: center;align-items: center;
}.overlay:before,
.overlay:after { /* 修改这里,同时定义 :before 和 :after */position: absolute; /* 只需在其中一个伪元素中定义,这里我放在了 :before 中 */left: 50%;top: 50%;transform: translate(-50%, -50%);color: #ffffff;text-align: center;white-space: nowrap; /* 防止文本换行 */
}.overlay:before {content: "禁止操作";font-size: 3em;opacity: 0.5;
}.overlay:after {content: "版权保护"; /* 第二个水印文本 */font-size: 2em; /* 可以调整第二个水印的字体大小 */opacity: 0.6; /* 可以调整第二个水印的透明度 *//* 如果需要调整第二个水印的位置,可以通过修改 left/top 或者使用 margin 来实现 */
}
js 代码 禁止操作 :
var id = $('#id');if (id.length > 0) {id.css({"position": "relative", 'cursor': 'none'}).append("<div class='overlay'></div>");tableDiv1.find('*').not('.overlay').each(function () {$(this).prop('disabled', true).addClass('disabled-element');});}// 这个段是 我在多处调用了 但是 我只想运行一次 所以添加了 这个 运行一次之后 直接给空 可用可不用 notOperable = function () {};