1、准备好需要用到的图标。
2、新建html文档。
3、书写hmtl代码。<h2 onclick="aaaaaa.message('自定义显示内容，3秒后消失',3000)">点我显示提示信息<br />支持显示提示内容，消失时间也可控制</h2>
4、书写css代码。<style> *{margin:0;padding: 0;list-style: none;} body{font-size:62.5%;background: #ebebeb;} h2{font-size: 0.14rem;text-align: center;} </style>
5、书写并添加js代码。<script src="jquery.min.js"></script><script>var aaaaaa = { message:function(text,time){ if(!text || !time){ return false; } var str = $("<div class='popMessage'><div class='mobileMessage'>"+text+"</div></div>"); str.appendTo("body"); $('.popMessage').css({ position:'fixed', width:'100%', height:'100%', left:'0', top:'0', 'z-index':'50' }) $('.mobileMessage').css({ width:'1.4rem', height:'auto', position:'absolute', top:'50%', left:'50%', padding:'0.8rem 0.1rem 0.1rem 0.1rem', 'border-radius':'0.1rem', background:'url(images/message.png) no-repeat center 0.1rem rgba(0,0,0,0.7)', 'background-size':'38% 48%', overflow:'hidden', 'text-align':'center', color:'#fff', 'font-size':'0.16rem', 'z-index':'9999', '-webkit-transform': 'translate(-50%,-50%)', '-moz-transform': 'translate(-50%,-50%)', 'transform': 'translate(-50%,-50%)' }); var offMessage = function remove(){ $('.popMessage').remove(); } setTimeout(offMessage,time); }}</script>
6、代码整体结构。
7、查看效果。
