自定义你的博客弹窗

又是一次托更文章啦。
本文是自定义自己的博客弹窗适用于大部分html博客。

我自己的代码

此代码依靠糖果屋店长的弹窗修改

function mrNotify(title,message,action){
    // 先移除旧有弹窗,确保不会重叠。
    var notifyWindow = document.getElementById('mr-Notify');
    if(notifyWindow){
      notifyWindow.remove();
    }
    //样式文件
    var tempstyleaction = `#mr-Notify{box-shadow:0 .25rem .5rem rgba(0,0,0,.05),0 1.5rem 2.2rem rgba(0,0,0,.1)!important;padding:0 30px;background:var(--mr-white);width:400px;position:fixed;top:50%;left:50%;z-index:999999;transform:translateX(-50%) translateY(-50%);margin:0 auto;border-radius:18px;}#mr-Notify:hover{border:var(--style-hover-border);}.mr-Notify-header{color:var(--mr-blue);line-height:40px;text-align:center;}.mr-Notify-main{padding:20px;}.mr--Notifymain p{padding:12px 0 0;}.mr-Notify-close{padding:10px 0 30px;text-align:center;}.mr-Notify-title{position:relative;font-size:18px;font-weight:900;display:inline-block;}#mr-Notify p{color:var(--mr-blue)}.mr-Notify-btn{font-weight:700;border-radius:50px;width:50%;cursor:pointer;background:var(--mr-purple);color:#fff;padding:0 15px;line-height:40px;font-size:14px;display:inline-block;}.mr-Notify-btn-two{font-weight:700;border-radius:50px;width:50%;cursor:pointer;background:var(--mr-blue);color:#fff;padding:0 15px;line-height:40px;font-size:14px;display:inline-block;}#mr-Notify::after{content:'';height:80px;width:100%;background:var(--mr-purple);position:absolute;top:0;left:0;z-index:-1;border-radius:18px 18px 0 0;}`
    var tempstyle = `#mr-Notify{box-shadow:0 .25rem .5rem rgba(0,0,0,.05),0 1.5rem 2.2rem rgba(0,0,0,.1)!important;padding:0 30px;background:var(--mr-white);width:400px;position:fixed;top:50%;left:50%;z-index:999999;transform:translateX(-50%) translateY(-50%);margin:0 auto;border-radius:18px;}#mr-Notify:hover{border:var(--style-hover-border);}.mr-Notify-header{color:var(--mr-blue);line-height:40px;text-align:center;}.mr-Notify-main{padding:20px;}.mr--Notifymain p{padding:12px 0 0;}.mr-Notify-close{padding:10px 0 30px;text-align:center;}.mr-Notify-title{position:relative;font-size:18px;font-weight:900;display:inline-block;}#mr-Notify p{color:var(--mr-blue)}.mr-Notify-btn{font-weight:700;border-radius:50px;width:100%;cursor:pointer;background:var(--mr-purple);color:#fff;padding:0 15px;line-height:40px;font-size:14px;display:inline-block;}#mr-Notify::after{content:'';height:80px;width:100%;background:var(--mr-purple);position:absolute;top:0;left:0;z-index:-1;border-radius:18px 18px 0 0;}`
    //若定义了action执行代码片段，则输出有双选项的弹窗
    if (action){
      var template =`<div id="mr-Notify"><style>` + tempstyleaction + `</style><div class="mr-Notify-header"><h3 class="mr-Notify-title">${title}</h3></div><div class="mr-Notify-main"><p>${message}</p></div><div class="mr-Notify-close"><span class="mr-Notify-btn"onclick="setTimeout(function(){` + `${action}` + `},500);cancelNotify()">确定</span><span class="mr-Notify-btn-two"onclick="cancelNotify()">取消</span></div></div>`
    } else { //若未定义action代码片段，则仅输出单选项的弹窗
      var template =`<div id="mr-Notify"><style>` + tempstyle + `</style><div class="mr-Notify-header"><h3 class="mr-Notify-title">${title}</h3></div><div class="mr-Notify-main"><p>${message}</p></div><div class="mr-Notify-close"><span class="mr-Notify-btn"onclick="cancelNotify()">确定</span></div></div>`
    };
  
    document.body.insertAdjacentHTML('beforeend',template);
  }
  
  // 关闭通知栏
  function cancelNotify(){
    var notifyWindow = document.getElementById('mr-Notify');
    notifyWindow.remove();
  }

开始

首先要在互联网上面找到一个弹窗的HTML,或者自己写。
我这个是在火喵日记本里面找到的弹窗: https://cat.dorcandy.cn/4bbdeac1.html
找到之后可以开始编辑上面的示例代码,简单讲几个重要的代码!

  //样式文件
  var tempstyleaction = `.mr-Notify{box-shadow:0 .25rem .5rem rgba(0,0,0,.05),0 1.5rem 2.2rem rgba(0,0,0,.1)!important;padding:0 30px;background:var(--mr-white);width:400px;position:fixed;top:50%;left:50%;z-index:999999;transform:translateX(-50%) translateY(-50%);margin:0 auto;border-radius:18px;}.mr-Notify:hover{border:var(--style-hover-border);}.mr-Notify-header{color:var(--mr-blue);line-height:40px;text-align:center;}.mr-Notify-main{padding:20px;}.mr--Notifymain p{padding:12px 0 0;}.mr-Notify-close{padding:10px 0 30px;text-align:center;}.mr-Notify-title{position:relative;font-size:18px;font-weight:900;display:inline-block;}.mr-Notify p{color:var(--mr-blue)}.mr-Notify-btn{font-weight:700;border-radius:50px;width:50%;cursor:pointer;background:var(--mr-purple);color:#fff;padding:0 15px;line-height:40px;font-size:14px;display:inline-block;}.mr-Notify-btn-two{font-weight:700;border-radius:50px;width:50%;cursor:pointer;background:var(--mr-blue);color:#fff;padding:0 15px;line-height:40px;font-size:14px;display:inline-block;}.mr-Notify::after{content:'';height:80px;width:100%;background:var(--mr-purple);position:absolute;top:0;left:0;z-index:-1;border-radius:18px 18px 0 0;}`
  var tempstyle = `.mr-Notify{box-shadow:0 .25rem .5rem rgba(0,0,0,.05),0 1.5rem 2.2rem rgba(0,0,0,.1)!important;padding:0 30px;background:var(--mr-white);width:400px;position:fixed;top:50%;left:50%;z-index:999999;transform:translateX(-50%) translateY(-50%);margin:0 auto;border-radius:18px;}.mr-Notify:hover{border:var(--style-hover-border);}.mr-Notify-header{color:var(--mr-blue);line-height:40px;text-align:center;}.mr-Notify-main{padding:20px;}.mr--Notifymain p{padding:12px 0 0;}.mr-Notify-close{padding:10px 0 30px;text-align:center;}.mr-Notify-title{position:relative;font-size:18px;font-weight:900;display:inline-block;}.mr-Notify p{color:var(--mr-blue)}.mr-Notify-btn{font-weight:700;border-radius:50px;width:100%;cursor:pointer;background:var(--mr-purple);color:#fff;padding:0 15px;line-height:40px;font-size:14px;display:inline-block;}.mr-Notify::after{content:'';height:80px;width:100%;background:var(--mr-purple);position:absolute;top:0;left:0;z-index:-1;border-radius:18px 18px 0 0;}`
  //若定义了action执行代码片段，则输出有双选项的弹窗
  if (action){
    var template =`<div class="mr-Notify"><style>` + tempstyleaction + `</style><div class="mr-Notify-header"><h3 class="mr-Notify-title">${title}</h3></div><div class="mr-Notify-main"><p>${message}</p></div><div class="mr-Notify-close"><span class="mr-Notify-btn"onclick="setTimeout(function(){` + `${action}` + `},500);cancelNotify()">确定</span><span class="mr-Notify-btn-two"onclick="cancelNotify()">取消</span></div></div>`
  } else { //若未定义action代码片段，则仅输出单选项的弹窗
    var template =`<div class="mr-Notify"><style>` + tempstyle + `</style><div class="mr-Notify-header"><h3 class="mr-Notify-title">${title}</h3></div><div class="mr-Notify-main"><p>${message}</p></div><div class="mr-Notify-close"><span class="mr-Notify-btn"onclick="cancelNotify()">确定</span></div></div>`
  };

  document.body.insertAdjacentHTML('beforeend',template);
}

这几处就是最重要的代码。

var template 两处 解释: 弹窗的Html代码,第一处代码是有两个选项的按钮弹窗,第二处是一个选项的按钮弹窗
var notifyWindow = document.getElementById('mr-Notify'); 两处 解释: 你只需要修改'mr-Notify'这个词就可以了,这个完美解释也该是你弹窗的div>id的名字
var tempstyleaction 解释: 两个选项按钮的样式
var tempstyle 解释: 一个选项按钮的样式