如何给网站添加弹窗公告?-主题修改

2022年5月9日16:00:31 发表评论
广告也精彩

微信号暂时无法添加好友,想提醒一下各位盆友。

发现只能是手动添加文字到微信号那里,属实有些麻烦。

搞了一段弹窗公告的代码,大家也可以直接食用。

食用方法直接添加到你的网站header里就行了。代码在文末

这种食用也不是很简单,每次都要操作源码比较麻烦,还是集成到主题设置中比较方便。

本站主题用的***(知道的一定知道),首先添加后台设置项

1、添加后台设置项

勾选显示后出现设置公告窗口

当然这里需要设计js的联动,不然点击是没反应的。

  1.     jQuery('#ts_gonggao').click(function() {
  2.     jQuery('#section-ts_gonggao1').fadeToggle(400);
  3. });
  4. if (jQuery('#ts_gonggao:checked').val() !== undefined) {
  5.     jQuery('#section-ts_gonggao1').show();
  6. }

2、前端调用

将公告源码放入单独php文件中,如我放在tsxcc/gg.php

在网站header里调用此文件,完成!

  1. <?php get_template_part('tsxcc/gg/gg'); ?>

源码详解:

外层 if (zm_get_option('ts_gonggao')) 如果启用则输出以下内容

内层调用文本框内容

<?php if ( zm_get_option('ts_gonggao1') ) { ?>

<?php echo stripslashes( zm_get_option('ts_gonggao1') ); ?>

<?php } ?>

测试后非常不错。

撒花

 

html代码

  1.   <!-- 公告 -->
  2.   <div class="layer"></div>
  3. <div id="globalAd">
  4.     <div id='hero-img' style="background-color: #1a95ff;background: linear-gradient(to left, #5dadf3 0, #4583ca 100%);">
  5.     </div>
  6.     <div id='profile-img'>
  7.         <img src="https://www.tsxxc.com/wp-content/themes/xiaochen/img/lpgo114.png" />
  8.     </div>
  9.     <div id='content'>
  10.         <p style="font-size: 15px;font-weight: bold;">2022年5月2日公告</p>
  11.         <p style=" padding: 5px; ">微信小程序上线,欢迎体验!</p>
  12.         <p style="padding: 5px 0 20px 0;color: #f00;font-weight: 450;">微信暂时无法添加好友请12号后再试!</p>
  13.         <a onclick="closeGlobalAd();" class="btn btn-default" rel='nofollow'>朕已阅</a>
  14.         <a href="https://tsxiaochen.com" onclick="redirectUrlToActive();" class="btn btn-default" rel='nofollow'>点击访问</a>
  15.     </div>
  16. </div>
  17.  <!-- 公告 -->

css

  1. a {
  2.     text-decorationnone!important
  3. }
  4. #globalAd {
  5.     max-width400px;
  6.     flex-basis: 100%;
  7.     margin: 0 auto;
  8.     background#fff;
  9.     border-radius: 10px;
  10.     box-shadow: 0 0 30px rgba(0, 0, 0, .3);
  11.     -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, .3);
  12.     overflowhidden;
  13.     positionfixed;
  14.     displaynone;
  15.     margin: 0 auto;
  16.     z-index: 10001
  17. }
  18. .layer {
  19.     width: 100%;
  20.     height: 100%;
  21.     positionfixed;
  22.     top: 0;
  23.     left: 0;
  24.     filter: alpha(opacity=50);
  25.     opacity: .5;
  26.     background#000;
  27.     z-index: 1000;
  28.     displaynone
  29. }
  30. #globalAd #hero-img {
  31.     width: 100%;
  32.     height100px;
  33.     background#007bff
  34. }
  35. #globalAd #profile-img {
  36.     width80px;
  37.     height80px;
  38.     margin: -60px auto 0;
  39.     border6px solid #fff;
  40.     border-radius: 50%;
  41.     box-shadow: 0 0 5px rgba(90, 90, 90, .3)
  42. }
  43. #globalAd #profile-img img {
  44.     width: 100%;
  45.     background#fff;
  46.     border-radius: 50%
  47. }
  48. #globalAd #content {
  49.     text-aligncenter;
  50.     width320px;
  51.     margin: 0 auto;
  52.     padding5px 0 20px
  53. }
  54. #container #content h1 {
  55.     font-size29px;
  56.     font-weight: 500;
  57.     margin50px 0 0
  58. }
  59. #globalAd #content p {
  60.     font-size15px;
  61.     font-weight: 400;
  62.     line-height: 1.8;
  63.     color#666;
  64. }
  65. #globalAd #content a {
  66.     color#ccc;
  67.     font-size14px;
  68.     margin: 0 10px;
  69.     transition: color .3s ease-in-out;
  70.     -webkit-transition: color .3s ease-in-out
  71. }
  72. #globalAd #content a:hover {
  73.     color#007bff
  74. }
  75. #globalAd #content .btn {
  76.     backgroundnone repeat scroll 0 0 #1ba1e2;
  77.     border: 0;
  78.     border-radius: 2px;
  79.     color#fff!important;
  80.     cursorpointer;
  81.     font-family: open sans, hiragino sans gb, microsoft yahei, wenquanyi micro hei, ArialVerdanaTahomasans-serif;
  82.     font-size14px;
  83.     padding6px 10%
  84. }
  85. #globalAd #content .btn:hover,
  86. .yanshibtn:hover {
  87.     backgroundnone repeat scroll 0 0 #9b59b6;
  88.     border: 0;
  89.     border-radius: 2px;
  90.     color#fff!important;
  91.     cursorpointer;
  92.     font-family: open sans, hiragino sans gb, microsoft yahei, wenquanyi micro hei, ArialVerdanaTahomasans-serif;
  93.     font-size14px;
  94.     padding8px 10%
  95. }

js

  1. jQuery.cookie = function(name, value, options) {
  2.     if(typeof value != 'undefined') {
  3.         options = options || {};
  4.         if(value === null) {
  5.             value = '';
  6.             options.expires = -1;
  7.         }
  8.         var expires = '';
  9.         if(options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
  10.             var date;
  11.             if(typeof options.expires == 'number') {
  12.                 date = new Date();
  13.                 var totalTime = 24 * 3600;
  14.                 var hour = date.getHours();
  15.                 var minutes = date.getMinutes();
  16.                 var seconds = date.getSeconds();
  17.                 var pastTime = 3600 * hour + 60 * minutes + seconds;
  18.                 var leftTime = totalTime - pastTime;
  19.                 date.setTime(date.getTime() + (options.expires * leftTime * 1000));
  20.             } else {
  21.                 date = options.expires;
  22.             }
  23.             expires = '; expires=' + date.toUTCString();
  24.         }
  25.         var path = options.path ? '; path=' + (options.path) : '';
  26.         var domain = options.domain ? '; domain=' + (options.domain) : '';
  27.         var secure = options.secure ? '; secure' : '';
  28.         document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
  29.     } else {
  30.         var cookieValue = null;
  31.         if(document.cookie && document.cookie != '') {
  32.             var cookies = document.cookie.split(';');
  33.             for(var i = 0; i < cookies.length; i++) {
  34.                 var cookie = jQuery.trim(cookies[i]);
  35.                 if(cookie.substring(0, name.length + 1) == (name + '=')) {
  36.                     cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
  37.                     break;
  38.                 }
  39.             }
  40.         }
  41.         return cookieValue;
  42.     }
  43. };
  44. $(function() {
  45.     var COOKIE_NAME = "tsxcc";
  46.     if($.cookie(COOKIE_NAME)) {
  47.         $(".layer").hide();
  48.         $("#globalAd").hide();
  49.     } else {
  50.         var tsxccH = $(window).height();
  51.         var tsxccW = $(window).width();
  52.         $(".layer").show();
  53.         $("#globalAd").css({
  54.             'top': tsxccH / 2 - $("#globalAd").height() / 2,
  55.             'left': tsxccW / 2 - $("#globalAd").width() / 2
  56.         });
  57.         $("#globalAd").slideDown(300, function() {
  58.             setTimeout("closeGloableAd()", '300000');
  59.         });
  60.         $.cookie(COOKIE_NAME, "tsxcc", {
  61.             path: '/',
  62.             expires: 1
  63.         });
  64.     }
  65. });
  66. function closeGlobalAd() {
  67.     $('#globalAd').hide();
  68.     $('.layer').hide();
  69. }
  70. function redirectUrlToActive() {
  71.     $('#globalAd').hide();
  72.     $('.layer').hide();
  73. }

 

 

 

 

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
ts小陈

发表评论(请规范评论)--评论需审核

:?: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :cry: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :mrgreen: :neutral: :razz:

已登录用户不需要填写以下内容