jquery 提示弹窗
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>H5弹出toast</title> <style type="text/css"> .m-toast-pop {display: none; position: fixed; width: 100%;top: 0;bottom: 0;right: 0;overflow: auto;text-align: center;} .m-toast-inner {position: absolute;left:50%;top:50%;width: 100%; transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);text-align: center;} .m-toast-inner-text{display: inline-block;margin: 0 22px; padding: 19px 21px;font-size: 16px;color: #FFFFFF;letter-spacing: 0;line-height: 22px;background: rgba(0,0,0,0.72);border-radius: 10px;} </style> </head> <body> <button id="btn" class="m-btn">弹出tips</button> <div id="m-toast-pop" class="m-toast-pop"> <div class="m-toast-inner"><div class="m-toast-inner-text" id="m-toast-inner-text">tips</div></div> </div> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> <script type="text/javascript"> $('#btn').on('click', function() { $('#m-toast-inner-text').text('我是tips'); $('#m-toast-pop').fadeIn(); setTimeout(function() { $('#m-toast-pop').fadeOut(); }, 2000); }); </script> </body> </html>
分类:
html/js/jquery
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律
2016-04-13 phpStudy环境配置多个站点，绑定域名
2016-04-13 phpstudy 安装memcached服务和memcache扩展