XIUNO最简单的弹窗方案
修罗学院 2022-4-19

这个就一段代码,放到你需要的页面 临时提醒弹窗效果很棒,

 

当然,你如果想要一天弹一次需要自行修改,我这不提供方法!

 

 

<div class="web_notice" style="position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.3);z-index:99999">
    <div style="position:fixed;top:50%;left:50%;width:550px;background:#fff;transform:translate(-50%,-50%);border-radius:40px;padding:50px 40px">
        <h3 style="font-weight:700;text-align:center;font-size:30px">网站通知</h3>
        <div style="font-size:16px;margin-top:26px;line-height:30px;color:#999">这是XIUNO爱好者 分享的弹窗源码演示。</div>
        <a style="display:block;background:#98a3ff;color:#fff;text-align:center;font-weight:700;font-size:19px;line-height:60px;margin:0 auto;margin-top:45px;border-radius:32px;width:80%" onclick='document.querySelector(".web_notice").remove()'>我知道了</a>
    </div>
</div>
最新回复 (10)
全部楼主
  • loverf
    2022-4-19 2
    0
    不错
  • 一秀十年
    2022-4-19 3
    0
    标准modal弹窗
    参考bootstrap
    https://v4.bootcss.com/docs/components/modal/
  • 66889999
    2022-4-20 4
    0
    不是响应式 好像
  • Tillreetree 版主
    2022-4-20 5
    0
    不错的帖子!
  • Mrlin
    2022-4-26 6
    0
    非常棒!!!
  • 清泉
    2022-5-10 7
    0
    沙发我没有,板凳我没有,板也没有,只好站在后面排队支持! 
  • power
    2022-5-20 8
    0
    我要拿出这帖子奉献给世人赏阅,我要把这个帖子一直往上顶,往上顶!顶到所有人都看到为止! 
  • 醉看小风月
    4月前 9
    0
    写成插件就好了
  • 22834211
    4月前 10
    0
    面对如此强贴,论遇到多大阻力,只要我一息上尚存,就绝不会让它沉沦下去,这一点请楼主放心。 
  • weige
    13天前 11
    0
    楼主,你写得实在是太好了。我惟一能做的,就只有把这个帖子顶上去这件事了。 
返回