适配任何网站的JS弹窗引导代码并且可用做子比主题弹窗提醒

前言

该代码可以判断主机系统来显示对应的引导链接，样式简约美观，非常不错哦。

效果图

目前我是用在子比主题站点的，不过这个是JS代码，是可以通用任何网页的哦。

JS代码

// 判断存在jq资源
try {
  if($ || jQuery) {
    tipsFun();
  }
} catch(e) {
  let script=document.createElement("script");
  script.type="text/javascript";
  script.src="https://cdn.nuoyo.cn/zy-file/2024/tanchuang/jquery.min.js";

  document.getElementsByTagName('head')[0].appendChild(script);

  script.onload = tipsFun;
}


function tipsFun() {
  // 判断用户是否是windows
  if((navigator.platform == "Win32") || (navigator.platform == "Windows")) {
    // let hostName = location.hostname;
    // if(hostName === 'mac.mac89.com') return;

    let curTime = new Date().getTime();
    if(!window.localStorage.hasTips || ((curTime - window.localStorage.hasTips) >= 86400000)) {
      setTimeout(()=> {
        $(document).ready(function(){
          let tipHtml = `
            <div class="tip-box" id="tip-box" style="position: fixed; z-index: 9999; width: 740px; height: 150px; background-color: #fff; border-radius: 0 0 20px 20px; text-align: center; font-size: 16px; top: 0; left: 50%; margin-left: -370px; box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2); display: none; transform: translateY(-100%); transition: all .6s;">
              <p class="tip" style="font-size: 18px; line-height: 1; margin: 38px 0 22px;">如果您当前使用的电脑是MacOS操作系统，请前往MacOS下载资源站点。</p>
              <button class="nomore" style="width: 120px; cursor: pointer; height: 40px; border: 1px solid #ddd; outline: none; border-radius: 5px; margin-right: 40px;">不再提醒</button>
              <button class="cancel" style="background-color: #333; color: #fff; width: 120px; cursor: pointer; height: 40px; border: none; outline: none; border-radius: 5px; margin-right: 40px;">继续浏览</button>
              <button class="sure" style="height: 40px; padding: 0 30px; background-color: #1B78F5; cursor: pointer; color: #fff; border-radius: 5px; outline: none; border: none;">立即前往 (10秒)</button>
            </div>`;

          $('body').append(tipHtml);

          const $tipBox = $('#tip-box');
          $tipBox.show().css('transform', 'translateY(0)');

          $tipBox.on('click', '.cancel', ()=> {
            removeTip();
          }).on('click', '.sure', ()=> {
            window.open("https://www.macw.com/");
          }).on('click', '.nomore', ()=> {
            removeTip();
            window.localStorage.hasTips = curTime;
          })

          let time = 10, timer;

          timer = setInterval(()=> {
            time--;
            $tipBox.find('.sure').text('立即前往 ('+ time +'秒)')
            if(time < 1) {
              removeTip();
            }
          }, 1000)

          function removeTip() {
            $tipBox.css('transform', 'translateY(-100%)');
            clearInterval(timer);
            setTimeout(function() {
              $tipBox.remove();
            }, 600)
          }
        });
      }, 1000);
    }
  }


  // pd广告地址
  let hostName = location.hostname;
  let pdAdress = "https://shop.macsc.com/pd19";

  // if(hostName === 'mac.macxf.com' || hostName === 'mac.orsoon.com') return; 

  let curTime = new Date().getTime();
  if(!window.localStorage.hasPdShowTime || ((curTime - window.localStorage.hasPdShowTime) >= 86400000)) {
    setTimeout(()=> {
      $(document).ready(function(){
        let hasLogin = true;

        let position_style = 'right: 50%; margin-right: -750px;';

        switch (hostName) {
          case 'mac.macxz.com':
            position_style = 'left: 50%; margin-left: -750px;';
            break;
          case 'mac.mac89.com':
          // case 'mac.macxf.com':
          case 'mac.macsc.com':
            hasLogin = !!$('.logined').length
            break;
          // case 'www.macz.com':
        //     hasLogin = !!$('.logined').children().length
        //     break;
        //   case 'www.macw.com':
        //   case 'www.macv.com':
        //     hasLogin = !!$('.header-login_logined').children().length
        //     break;
          default:
            hasLogin = true;
            break;
        }
        
        if(!hasLogin) return;

        let leftPdHtml = `
          <div class="pd-left" id="pd-left-box" style="position: fixed; width: 130px; height: 120px; ${position_style} top: 20%; z-index: 99; text-align: center; border-radius: 10px;background: linear-gradient(90deg,#5B95F2,#224FE8);padding-top: 8px; box-sizing: border-box; font-size: 13px;">
            <div class="close" style="cursor:pointer; position: absolute; width: 20px; height: 20px; line-height: 20px; right: -5px; top: -5px; border-radius: 50%; background-color: rgba(0,0,0,0.3); color: #fff;">X</div>
            <a href="${pdAdress}" target="_blank">
              <img src="https://cdn.nuoyo.cn/zy-file/2024/tanchuang/pd19.png"  style="width: 60px; display: inline-block;">
              <p style="color: #fff;">Parallels Desktop 19</p>
              <span style="color: #FFC600;">永久授权许可证激活</span>
            </a>
          </div>
        `

         $('body').append(leftPdHtml);
         $('#pd-left-box').on('click', '.close', function() {
           window.localStorage.hasPdShowTime = curTime;
           $('#pd-left-box').remove();
         })
      });
    }, 1000);
  }


  // 底部商城广告
  let shopHtml = `<div class="shop-box {class}" id="shop-box" style="position: fixed; box-sizing: border-box; z-index: 199; width: 100%; height: 120px; left: 0; bottom: {bot}; background-color: #fff; box-shadow: 0 -10px 20px 0 rgba(0,0,0,.1); transition: all .2s; padding: 25px 0;">
  <div class="close" style="position: absolute; z-index: 1; width: 60px; height: 30px; {rotate} line-height: 30px; background: #fff; cursor: pointer; left: 0; top: -30px; text-align: center;">
    <i style="display: inline-block;transform: rotate(90deg);font-size: 24px;color: #666;">></i>
  </div>
  <div class="line" style="position: absolute; width: 100%;height: 10px;background-color: #fff;top: -10px;box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);"></div>
  <div class="items-box" style="display: flex; justify-content: center;">
    <p style="font-size: 24px; width: 50px; line-height: 1.4;">正版软件</p>
    <div class="item" style="width: 250px; height: 70px; box-sizing: border-box; box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1); border-radius: 15px; padding: 15px 20px; line-height: 40px; margin: 0 10px 0 20px;">
      <a href="${pdAdress}" target="_blank" style="display: block;">
        <img src="https://cdn.nuoyo.cn/zy-file/2024/tanchuang/pd19.png" height="40"  style="display: inline-block; vertical-align: middle;">
        <span style="margin-left: 10px;">Parallels Desktop</span>
        <i style="float: right; width: 30px; height: 30px; line-height: 30px; margin-top: 5px; border-radius: 50%; background-color: #1c65f7; color: #fff; text-align: center; font-size: 16px; transform: rotate(-30deg);">➤</i>
      </a>
    </div>
    <div class="item" style="width: 200px; height: 70px; box-sizing: border-box; box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1); border-radius: 15px; padding: 15px 20px; line-height: 40px; margin: 0 10px;">
      <a href="https://shop.macsc.com/cad" target="_blank" style="display: block;">
        <img src="https://cdn.nuoyo.cn/zy-file/2024/tanchuangcad2023.png" height="40"  style="display: inline-block; vertical-align: middle;">
        <span style="margin-left: 10px;">CAD</span>
        <i style="float: right; width: 30px; height: 30px; line-height: 30px; margin-top: 5px; border-radius: 50%; background-color: #1c65f7; color: #fff; text-align: center; font-size: 16px; transform: rotate(-30deg);">➤</i>
      </a>
    </div>
    <div class="item" style="width: 200px; height: 70px; box-sizing: border-box; box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1); border-radius: 15px; padding: 15px 20px; line-height: 40px; margin: 0 10px;">
      <a href="https://shop.macsc.com/maya" target="_blank" style="display: block;">
        <img src="https://cdn.nuoyo.cn/zy-file/2024/tanchuang/maya.png" height="40"  style="display: inline-block; vertical-align: middle;">
        <span style="margin-left: 10px;">Maya</span>
        <i style="float: right; width: 30px; height: 30px; line-height: 30px; margin-top: 5px; border-radius: 50%; background-color: #1c65f7; color: #fff; text-align: center; font-size: 16px; transform: rotate(-30deg);">➤</i>
      </a>
    </div>
    <div class="item" style="width: 200px; height: 70px; box-sizing: border-box; box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1); border-radius: 15px; padding: 15px 20px; line-height: 40px; margin: 0 10px;">
      <a href="https://shop.macsc.com/flame" target="_blank" style="display: block;">
        <img src="https://cdn.nuoyo.cn/zy-file/2024/tanchuang/flame.png" height="40"  style="display: inline-block; vertical-align: middle;">
        <span style="margin-left: 10px;">Flame</span>
        <i style="float: right; width: 30px; height: 30px; line-height: 30px; margin-top: 5px; border-radius: 50%; background-color: #1c65f7; color: #fff; text-align: center; font-size: 16px; transform: rotate(-30deg);">➤</i>
      </a>
    </div>
  </div>
</div>
`;

//<div class="chat-gpt" style="display:none; position: fixed;z-index: 2;bottom: 220px;left: 30px;width: 100px;height: 100px;box-sizing: border-box;box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);border-radius: 15px;padding: 16px;line-height: 40px;text-align: center;margin: 0 10px;background: linear-gradient(135deg, #9D4EFF, #2C52F4);">
//  <a href="https://zy.nuoyo.cn/" target="_blank" style="display: block;color: #fff;">
//    <img src="https://cdn.nuoyo.cn/zy-file/2024/tanchuang/gpt.png" height="40"  style="display: inline-block;vertical-align: middle;">
//    <p>Chat GPT</p>
//  </a>
//</div>

//<div class="item gpt" style="width: 200px;height: 70px;box-sizing: border-box;box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);border-radius: 15px;padding: 15px 18px;line-height: 40px;margin: 0 10px;background: linear-gradient(135deg, #9D4EFF, #2C52F4);">
//  <a href="https://zy.nuoyo.cn/" target="_blank" style="display: block;color: #fff;">
//    <img src="https://cdn.nuoyo.cn/zy-file/2024/tanchuang/gpt.png" height="30"  style="display: inline-block;vertical-align: middle;">
//    <span style="margin-left: 10px;">Chat GPT人工智能</span>
//  </a>
//</div>

  let hasHide = window.localStorage.hideShop || '';
  if(hasHide === 'hide') {
    shopHtml = shopHtml.replace('{bot}', '-117px').replace('{class}', 'bot').replace('{rotate}', 'transform: rotate(180deg);')
  }  else {
    shopHtml = shopHtml.replace('{bot}', '0').replace('{class}', '').replace('{rotate}', '');
  }

  $('body').append(shopHtml);

  if(hostName === 'mac.mac89.com') {
    $('#shop-box').find('.gpt').hide();
  }

   $('#shop-box').on('click', '.close', function() {
    let $box = $('#shop-box')
     if($box.hasClass('bot')) {
       $box.css({'bottom': '0'})
       $(this).css({'transform': 'rotate(0)'})
       window.localStorage.hideShop = '';
     } else {
      $box.css({'bottom': '-117px'})
      $(this).css({'transform': 'rotate(180deg)'})
      window.localStorage.hideShop = 'hide';
     }

     $box.toggleClass('bot');
   })
}