您的位置：首页 > Web前端 > HTML5

html5+css3实现手机toast提示

2016-07-28 16:54 429 查看

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>自定义Toast，类似于android的Toast</title>

<style>

body {

    font-family: 'Lucida Grande', 'Helvetica', sans-serif;

}



</style>

<script>

//自定义弹框

function Toast(msg,duration){

    duration=isNaN(duration)?3000:duration;

    var m = document.createElement('div');

    m.innerHTML = msg;

    m.style.cssText="width:60%; min-width:150px; background:#000; opacity:0.5; height:40px; color:#fff; line-height:40px; text-align:center; border-radius:5px; position:fixed; top:40%; left:20%; z-index:999999; font-weight:bold;";

    document.body.appendChild(m);

    setTimeout(function() {

        var d = 0.5;

        m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';

        m.style.opacity = '0';

        setTimeout(function() { document.body.removeChild(m) }, d * 1000);

    }, duration);

}

</script>

</head>

<body>

<button onclick="Toast('您点击了弹框按钮！',2000);">Toast</button>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航