点击查看图片
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover"> <style> body{ width: 100%; height: 100%; margin: 0; padding: 0; } #content{ width: 100%; height: 10rem; border-top-left-radius: 10px; border-top-right-radius: 10px; background: skyblue; position: fixed; left: 0; right: 0; bottom: -10rem; margin: 0 auto; text-align: center; line-height: 10rem; } @keyframes slideUp { from{ bottom: -10rem; } to{ bottom: 0; } } @keyframes slideDown { from{ bottom: 0; } to{ bottom: -10rem; } } #content img{ width: 1.2rem; height: 1.2rem; position: absolute; right: 10px; top: 10px; } </style> </head> <body> <div id="main"> <a href="#" rel="external nofollow" id="a">点击弹出</a> </div> <div id="content"> 测试区域 <img src="images/close.png" id="close"> </div> </body> <script> var show = document.getElementById("a"); var close = document.getElementById("close"); var content = document.getElementById("content"); var main = document.getElementById("main"); document.onclick = function () { content.style.animation = "slideDown 0.5s 1 normal forwards"; main.style.opacity = "1"; }; close.addEventListener("click",function () { content.style.animation = "slideDown 0.5s 1 normal forwards"; main.style.opacity = "1"; }); show.addEventListener("click",function (e) { stopFunc(e); content.style.animation = "slideUp 0.5s 1 normal forwards"; main.style.opacity = "0.5"; },false); content.addEventListener("click",function (e) { stopFunc(e); },false); //阻止事件向下传递 function stopFunc(e) { e.stopPropagation() ? e.stopPropagation() : e.cancelBubble = true; } </script> </html>
总结
以上所述是小编给大家介绍的纯js+css实现仿移动端淘宝网站的弹出详情框功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对亿速云网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。