提示弹窗

最新推荐文章于 2024-08-14 15:45:18 发布

寒蝉2233

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量245

点赞数 1

分类专栏： javascript 提示弹窗文章标签： javascript css html

本文链接：https://blog.csdn.net/qq_26282161/article/details/107458985

版权

javascript 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

提示弹窗

1 篇文章 0 订阅

订阅专栏

大家在做移动端界面时，经常会有验证某些信息的提示信息，我这里写了一个提示弹窗，希望对大家有所帮助。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>提示弹窗</title>
    <style>
        .popUpHint{
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            -ms-transform: translate(-50%,-50%);
            -moz-transform: translate(-50%,-50%);
            -webkit-transform: translate(-50%,-50%);
            -o-transform: translate(-50%,-50%);
            width: 70%;
            padding: 1rem 2rem;
            font-size: 2rem;
            line-height: 3rem;
            border-radius: 1rem;
            text-align: center;
            background: #333333;
            color: #ffffff;
        }
    </style>
</head>
<body>

</body>
</html>
<script>
    popUpHint("提示信息");
    //提示弹窗
    function popUpHint(val){
        var popUpHint = document.createElement('div');
        popUpHint.innerHTML = val;
        popUpHint.setAttribute("class","popUpHint");
        document.body.append(popUpHint);
        fadeInPrototype(popUpHint, 30, 80);
        setTimeout(function(){
            fadeOutPrototype(popUpHint, 30);
        },1500);
    }
    //设置透明度
    function setOpacity(el,opacity){
        el.style.opacity = opacity / 100;
        el.style.filter = 'alpha(opacity=' + opacity + ')';
    }
    //淡入
    function fadeInPrototype(elem,speed,opacity){
        speed = speed || 20;
        opacity = opacity || 100;
        setOpacity(elem,0);
        var val = 0;
        (function() {
            setOpacity(elem,val);
            val += 10;
            if(val <= opacity){
                setTimeout(arguments.callee,speed);
            }
        })();
    }
    //淡出
    function fadeOutPrototype(elem,speed,opacity){
        speed = speed || 20;
        opacity = opacity || 0;
        var val = 100;
        (function() {
            setOpacity(elem,val);
            val -= 10;
            if(val >= opacity){
                setTimeout(arguments.callee, speed);
            }else if(val < 0){
                elem.remove();
            }
        })();
    }
</script>

寒蝉2233

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
提示弹窗

大家移动端界面是，经常会有验证某些信息的提示信息，我这里写了一个提示弹窗，希望对大家有所帮助。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>提示弹窗</title&gt
复制链接

扫一扫

专栏目录