分享一个提示框样式

    选择打赏方式

微信公众号伊伊兔,QQ群号:455535550,淘宝天猫优惠劵领取网站:dy208.cn

来自傲娇的小航博客的分享,挺漂亮简约的提示框,看图:

深度截图_选择区域_20180523122807.png

css,js都在下面了,自己抠出来用吧

<!--示例开始--> 
<html>
<head>
<title>我的第一个 HTML 页面</title>
<style>
#toast{width:300px;position:fixed;top:2%;right:1%;z-index:999999;background-color:rgba(0,0,0,.7);border-radius:5px;color:#fff;padding:10px 0;text-align:center;-webkit-animation: zoomOut .4s ease both;animation: zoomOut .4s ease both;}
@keyframes zoomOut { 0% { opacity: 0; transform: scale(.6); } 100% { opacity: 1; transform: scale(1); } }
</style>
<script>
// 显示提示框
function showToast(message, t) {
var alert = document.getElementById("toast");
if(alert == null){
alert = document.createElement("div");
alert.id = 'toast';
alert.innerText = message;
} else {
alert.style.opacity = .9;
}
document.body.appendChild(alert);
t = t ? t : 1000;
toast_timer = setTimeout(function() {
if(alert) {
document.body.removeChild(alert);
}
}, t);
}
function test() {
showToast('这是一个演示噢--子成君', 2500);
}
</script>
</head>

<body>
<input type="button" value="测试" onclick="test()" />
</body>

</html>
<!--示例结束--> 


版权声明:若无特殊注明,本文皆为《 子成君 》原创,转载请保留文章出处。
本文链接:分享一个提示框样式 https://www.zcjun.com/yuanma/68.html
百度收录:本文已被百度收录点击查看详情!
本文到此结束

热门推荐

发表吐槽

你肿么看?

你还可以输入 250 / 250 个字

爱你允悲悲伤吃惊委屈可怜憧憬吃瓜大哭开心坏笑笑哭哼打哈欠鼓掌乖嘘阴险日了狗费解挤眼滑稽666比心


既然没有吐槽,那就赶紧抢沙发吧!