提示弹框

Posted jiunie

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了提示弹框相关的知识，希望对你有一定的参考价值。

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>提示弹框</title>
        <style type="text/css">
　　　　　　*,*::before,*::after{box-sizing:border-box;}

　　　　　　.body{ display: flex; justify-content: center; align-items: center; position: relative; width: 100%; height: 100vh; border:0px solid red;}

　　　　　　.tooltip { position: relative; background:#999999; padding: 5px 12px; margin: 5px; font-size: 15px;  color: #FFF; }
　　　　　　.tooltip:before,
　　　　　　.tooltip:after { position: absolute; content: ‘‘; opacity: 0; transition: all 0.4s ease; }

　　　　　　.tooltip:before { top: -22px; transform: translateY(20px); z-index:2; content: ""; width: 12px; height: 12px; display: block; background-color: whitesmoke; border-right:1px solid #bdbdbd; border-bottom:1px solid #bdbdbd; }
　　　　　　.tooltip:after { content: attr(data-tooltip); background:whitesmoke; color:#333333; width: 160px; height: 40px; font-size: 13px; font-weight: 300; top: -54px; left: -90px; padding: 10px; border-radius: 5px; letter-spacing: 1px; transform: translateY(20px);     box-shadow: 1px -1px 5px rgba(0,0,0,0.2); border:1px solid #bdbdbd; z-index:-1;}

　　　　　　.tooltip:hover::before,
　　　　　　.tooltip:hover::after { opacity: 1; transform: translateY(-2px); } 
　　　　　　.tooltip:hover::before{transform:rotate(45deg);  }
        </style>
    </head>

    <body class="body">
        <span class="tooltip" data-tooltip="不能发送空白信息">发送</span> 
    </body>
</html>

 

以上是关于提示弹框的主要内容，如果未能解决你的问题，请参考以下文章

[2016-03-31][跳过UAC弹框提示]

自定义弹框，点击提示框外空白区域，让弹框消失

提示弹框

手写vue弹框提示

修改成功后弹框提示

我的C语言学习进阶之旅解决 Visual Studio 2019 报错：错误 C4996 ‘fscanf‘: This function or variable may be unsafe.(代码片段