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

最新推荐文章于 2020-05-02 02:06:30 发布

weixin_45377882

最新推荐文章于 2020-05-02 02:06:30 发布

阅读量810

点赞数 3

文章标签： js html css css3

本文链接：https://blog.csdn.net/weixin_45377882/article/details/103711065

版权

在这里插入图在这里插入图片描述片描述
代码

<!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="#" 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>
//文章为博主原创文章，转载请附明出处。

weixin_45377882

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
纯js+css实现仿移动端淘宝网站的弹出详情框

纯js+css实现仿淘宝网站的弹出详情框html代码点击弹出测试区域 css代码 #content{ width: 100%; height: 10rem; border-top-left-radius: 10px; border-top-right-radius:...
复制链接

扫一扫