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 () {};