子比主题 – 全局B2弹窗提醒样式美化
这个是子比主题全局B2弹窗提醒样式的美化，可以看本站的复制、签到等等更多按钮，就是把子比默认的弹窗替换了B2样式美化，部署之前要确保之前没有引入过其他的弹窗样式，话不多说直接开始！代码部署
一共三个地方的代码，跟着我的步骤走不会有问题，确保之前没有部署过其他的弹窗样式！
我们先丢CSS样式到：子比主题–>>自定义CSS样式即可！
/*弹窗提醒*/
.qmsg.qmsg-wrapper {
box-sizing:border-box;
margin:0;
padding:0;
font-size:13px;
font-variant:tabular-nums;
line-height:1;
list-style:none;
font-feature-settings:"tnum";
position:fixed;
top:136px;
left:0;
z-index:9999999;
width:100%;
pointer-events:none;
color:#000;
}
.qmsg .qmsg-item {
padding:8px;
text-align:center;
-webkit-animation-duration:.3s;
animation-duration:.3s;
position:relative;
}
.qmsg .qmsg-item .qmsg-count {
text-align:center;
position:absolute;
left:-4px;
top:-4px;
background-color:#FF3355;
color:#fff;
font-size:12px;
line-height:16px;
border-radius:2px;
display:inline-block;
min-width:16px;
height:16px;
-webkit-animation-duration:.3s;
animation-duration:.3s;
}
.qmsg .qmsg-item:first-child {
margin-top:-8px;
}
.qmsg .qmsg-content {
text-align:left;
position:relative;
display:inline-block;
padding:10px 16px;
background:#fff;
border-radius:4px;
box-shadow:0 4px 12px rgba(0,0,0,.15);
pointer-events:all;
max-width:80%;
min-width:80px;
}
.qmsg-content > div {
display:flex;
align-items:center;
}
.qmsg .qmsg-content {
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
display:flex;
align-items:center;
}
.qmsg .qmsg-content .qmsg-content-with-close {
padding-right:20px;
}
.qmsg .qmsg-icon {
display:inline-block;
color:inherit;
font-style:normal;
text-align:center;
text-transform:none;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
position:relative;
top:0;
margin-right:8px;
font-size:16px;
}
.qmsg .qmsg-icon svg {
display:inline-block;
}
.qmsg .qmsg-content-info .qmsg-icon {
color:#1890ff;
user-select:none;
}
.qmsg .qmsg-icon-close {
position:absolute;
top:11px;
right:5px;
padding:0;
overflow:hidden;
font-size:12px;
line-height:22px;
background-color:transparent;
border:none;
outline:none;
cursor:pointer;
color:rgba(0,0,0,.45);
transition:color .3s;
}
.qmsg .qmsg-icon-close:hover>svg path {
stroke:#555;
}
.qmsg .animate-turn {
animation:MessageTurn 1s linear infinite;
-webkit-animation:MessageTurn 1s linear infinite;
}
@keyframes MessageTurn {
0% {
-webkit-transform:rotate(0deg);
}
25% {
-webkit-transform:rotate(90deg);
}
50% {
-webkit-transform:rotate(180deg);
}
75% {
-webkit-transform:rotate(270deg);
}
100% {
-webkit-transform:rotate(360deg);
}
;}@-webkit-keyframes MessageTurn {
0% {
-webkit-transform:rotate(0deg);
}
25% {
-webkit-transform:rotate(90deg);
}
50% {
-webkit-transform:rotate(180deg);
}
75% {
-webkit-transform:rotate(270deg);
}
100% {
-webkit-transform:rotate(360deg);
}
;}@-webkit-keyframes MessageMoveOut {
0% {
max-height:150px;
padding:8px;
opacity:1;
}
to {
max-height:0;
padding:0;
opacity:0;
}
;}@keyframes MessageMoveOut {
0% {
max-height:150px;
padding:8px;
opacity:1;
}
to {
max-height:0;
padding:0;
opacity:0;
}
;}@-webkit-keyframes MessageMoveIn {
0% {
transform:translateY(-100%);
transform-origin:0 0;
opacity:0;
}
to {
transform:translateY(0);
transform-origin:0 0;
opacity:1;
}
;}@keyframes MessageMoveIn {
0% {
transform:translateY(-100%);
transform-origin:0 0;
opacity:0;
}
to {
transform:translateY(0);
transform-origin:0 0;
opacity:1;
}
;}@-webkit-keyframes MessageShake {
0%,100% {
transform:translateX(0px);
opacity:1;
}
25%,75% {
transform:translateX(-4px);
opacity:0.75;
}
50% {
transform:translateX(4px);
opacity:0.25;
}
;}@keyframes MessageShake {
0%,100% {
transform:translateX(0px);
opacity:1;
}
25%,75% {
transform:translateX(-4px);
opacity:0.75;
}
50% {
transform:translateX(4px);
opacity:0.25;
}
;}
将下面的代码丢到：子比主题–>>自定义底部HTML代码即可，里面有一个引入的js代码，js你可以访问一下保存本地，如果不会我放到后面你自己下载js文件然后上传服务器拿路径就行！
// 引入JS的message通知代码
<script type="text/javascript" src="https://www.tfbkw.com/wp-content/themes/ZibTF/js/tengfei/message.min.js"></script>
<script>
// 通知
// 全局变量用于存储加载消息实例
var loadingMsgInstance = null;
(function() {
function customNotyf(str, type, time, id) {
// 如果类型是 'danger'，统一转换为 'error'
if (type === 'danger') {
type = 'error';
}
// 设置默认类型和时间
type = type || 'success';
time = time || 5000;
// 如果时间小于 100，假设是以秒为单位，转换为毫秒
if (time < 100) {
time *= 1000;
}
var qmsgType;
switch (type) {
case 'success':
qmsgType = 'success';
closeLoadingMsg(); // 关闭加载中消息
break;
case 'error':
qmsgType = 'error';
closeLoadingMsg(); // 关闭加载中消息
break;
case 'warning':
qmsgType = 'warning';
closeLoadingMsg(); // 关闭加载中消息
break;
case 'load':
qmsgType = 'loading';
if (!loadingMsgInstance) {
loadingMsgInstance = Qmsg.loading(str || '正在处理中，请稍后...', { timeout: 0 });
}
return; // 加载中消息不需要设置超时
default:
qmsgType = 'info';
closeLoadingMsg(); // 关闭加载中消息
}
// 显示对应类型的通知
Qmsg(str, { timeout: time });
}
// 关闭加载消息的函数
function closeLoadingMsg() {
if (loadingMsgInstance) {
loadingMsgInstance.close(); // 关闭加载消息
loadingMsgInstance = null; // 清除引用
}
}
// 检查并覆盖 notyf 的实现
function overrideNotyf() {
if (typeof window.notyf !== 'undefined') {
window.notyf = customNotyf;
clearInterval(intervalId); // 停止轮询
}
}
// 每隔 100 毫秒检查一次是否已经定义了 notyf
var intervalId = setInterval(overrideNotyf, 100);
})();
</script>
如果不会本地保存js，那么就下载附件，上传附件，然后路径记得调整好！
页:
[1]