1

可关闭的活动/通知/广告源代码

xinyu
2025-07-15 225

可关闭的活动/通知/广告源代码

代码如下:(自己插入你想放置的地址就可以啦),本文转载于菜鸟部落

<style>
.sitetips-default{background: #fff3e9;border: 1px solid #fcecdf;position: fixed;bottom: 20px;left:0;right: 0;z-index: 1000;width: 70%;max-width:1000px;border-radius: 3px;font-size: 15px;display: none;padding:14px 35px 12px;color:#f58b36;margin:0 auto;}
.sitetips-default .close{position:absolute;top:calc(50% - 12px);right:15px;color:#FF7C3C !important;text-decoration: none;height: 24px;line-height: 24px;}
.sitetips-default .close .icon{font-size:24px;top:-1px;}
.sitetips-default a{padding:0 !important;background:transparent !important;color:var(--theme-color) !important;text-decoration: underline;}
.sitetips-default .btn{padding:6px 12px !important;background: var(--theme-color) !important;color:#fff !important;border-radius: 20px;font-size:12px;display: inline-block;text-decoration: none;line-height: 1;}
.sitetips-default{width: 90%;text-align: left;font-size: 14px;padding:15px;right: 0;left: 0;bottom: 50px;}
.sitetips-default .close{right:calc(50% - 12px);bottom:-30px;top:inherit;font-size:28px;}
</style>

<div class="sitetips sitetips-default" style="display: block;" id="sitetips">
 <span style="font-family: Arial, sans-serif; font-size: 14px; text-align: justify;">菜鸟部落欢迎所有的菜鸟们加入哦!</span>
<strong><span style="font-family: Arial, sans-serif; font-size: 14px; text-align: justify;">2025年1月24日至2025年2月5日充值有活动</span>95折</strong><a href="javascript:;" class="close" id="close">×</i></a>
</div>
<script type="text/javascript">
window.onload=function(){
    var wenzi=document.getElementById('close');
    var div=document.getElementById('sitetips');
    wenzi.onfocus=function(){
            if(div.style.display=='block'){ // == 判断div.display是否为显示
                    div.style.display='none'; //= 赋值也可了解成改变
                }
                else{
                    div.style.display='block';
                }
        }
}; 
</script>
本站申明 1、本论坛一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请投诉举报
2、本论坛的资源部分来源于网络,如有侵权,请 私信联系站长进行删除处理。
3、不得发布和链接任何有关政治, 色情, 宗教, 迷信.低俗、变态、血腥、暴力以及危害国家安全.诋毁政府形象等违法言论和信息的帖子.
4、本帖图片及内容纯属发布用户个人意见,与本站无关!
4,本帖如为原创资源/教程分享帖,则本站与发布用户共同享有内容版权!
6,本站管理有权在不经发布者同意的情况下,根据版规及相关法律法规删除/修改本帖!
7,如无特别说明,任何个人或者组织不得转载本帖内容!任何个人或团体不得将本站资源用于非法用途!
8,未尽事宜最终解释权归本站(xiuno论坛)所有!

最新回复 (1)
  • 小白AI @Ta 2025-07-15 这家伙太懒了,什么也没留下。 只看Ta
    0 引用 2

    这段代码提供了一个可关闭的活动通知样式,其中包含HTML、CSS和JavaScript。如果你想让这个通知在页面加载时自动显示,并在点击关闭按钮时隐藏,这段代码可以满足你的需求。不过,我注意到JavaScript部分的逻辑有些问题:`wenzi.onfocus`应该改为`wenzi.onclick`,因为你是想要在点击关闭按钮时触发隐藏通知的动作,而不是在聚焦时。下面是修改后的代码:

    ```html



    菜鸟部落欢迎所有的菜鸟们加入哦!
    2025年1月24日至2025年2月5日充值有活动95折×


    ```

    记得在实际部署时,将`.close`标签中的`×`改为一个合适的关闭图标或者文本,以提高用户体验。

    • Xiuno论坛
      3

请先登录后发表评论!

返回