js+css实现浮层

以你之姓@ 2023-10-18 14:58 119阅读 0赞

## js+css实现浮层 ##

<!DOCTYPE html>
    <html>
    <head>
    <style>
    
    </style>
    <script>
    //自定义弹框
    function Toast(msg,duration){
         
         duration = isNaN(duration) ? 3000 : duration;
                var m = document.createElement('div');
                m.innerHTML = "<span style='padding:20%'>" + msg + "</span>";
                m.style.cssText = "width:50%;padding:6%;min-width: 150px;opacity: 0.5;color: rgb(255, 255, 255);line-height: 30px;text-align: center;border-radius: 55px;position: fixed;top: 50%;left: 30%;z-index: 999999;background: rgb(0, 0, 0);font-size: 22px;";
                document.body.appendChild(m);
                setTimeout(function() {
         
                    var d = 0.5;
                    m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
                    m.style.opacity = '0';
                    setTimeout(function() {
          document.body.removeChild(m) }, d * 1000);
                }, duration);
    }
    </script> 
    </head>
    <body>
    <button onclick="Toast('敬请期待',2000);">Toast</button>
    </body>
    </html>

代码可以直接拷贝试一下，改一下自己的样式即可

发表评论取消回复

表情：

评论列表（有 0 条评论，119人围观）

还没有评论，来说两句吧...

相关阅读

相关 js+css实现浮层

js+css实现浮层 <!DOCTYPE html> <html> <head> <style> </style>

以你之姓@/ 2023年10月18日 14:58/ 0 赞/ 120 阅读

相关 android 渐变蒙版_Flutter新手引导蒙版（浮层）

题记 —— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精，即是折腾每一天。重要消息 f lutter中网络请求dio使用分析视频教程在这里 Flutter 从入

Bertha 。/ 2023年01月02日 03:21/ 0 赞/ 300 阅读

相关 c++ wsprintf 浮点数转换_python工厂第7层类型转换

![1813432f01ca679d7d77ae25fafaf0f2.png][] python 中的变量不需要声明。每个变量在使用前都必须赋值，变量赋值以后该变量才会被创建

╰半夏微凉°/ 2023年01月01日 11:57/ 0 赞/ 133 阅读

相关 JavaScript实现浮点数转十六进制

JavaScript实现浮点数转十六进制字符最近一个嵌入式项目中需要WEB功能，因此想到利用HTML+JavaScript实现一些参数配置功能，参数由JavaScript生

朱雀/ 2022年09月17日 15:23/ 0 赞/ 215 阅读

相关 Android NavigationBar隐藏与浮层

Android SystemBar各种风格案例： [Android System Bar（Status Bar 和Navigation Bar）暗淡效果][Andr

╰+哭是因爲堅強的太久メ/ 2022年06月09日 02:45/ 0 赞/ 367 阅读

相关 Android Status Bar的隐藏与浮层效果

Android SystemBar各种风格案例： [Android System Bar（Status Bar 和Navigation Bar）暗淡效果][Andr

淡淡的烟草味﹌/ 2022年06月09日 02:21/ 0 赞/ 358 阅读

相关让一个div层浮在最上层

1、需求：做一个input框，支持手动输入的同时，还支持下拉框；所以要求这个下拉框要浮在最上层，如图： ![2018041717442184

快来打我*/ 2022年05月27日 11:12/ 0 赞/ 344 阅读

相关根据实体类生成持久层、控制层、服务层、实现层

最近写个java web 程序，用的spring boot、spring data jpa 由于数据库表较多、逆向工程生成的实体类也比较多，重复性工作就很多也很枯燥，今天

客官°小女子只卖身不卖艺/ 2022年03月20日 09:56/ 0 赞/ 355 阅读

相关 appium inspector 无法定位H5上面的浮层（弹层）元素

问题： H5上面的浮层（H5上面悬浮了客户端弹出的弹层）inspector 无法定位，可通过坐标相对定位法进行定位。定位时浮层总是无法获取，会自动定位到浮层下面的H5元

布满荆棘的人生/ 2022年02月24日 10:52/ 0 赞/ 386 阅读

相关 JQuery实现悬浮层

JQuery实现悬浮层 1、HTML代码 <div id="fudong" style="border:1px solid 454545; width:50px;

秒速五厘米/ 2021年09月15日 10:52/ 0 赞/ 389 阅读