纯js+css实现仿移动端淘宝网站的弹出详情框功能

时间：2021-05-18

点击查看图片

代码

<!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" alt="" 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实现仿移动端淘宝网站的弹出详情框功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章