<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQ自定义弹窗</title> <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> <style> .tipBox { position:fixed; bottom:0; left:0; width:100%; height:100%; z-index:99999999; display:none; } .tipBox div { width:100%; height:100%; display:flex; display:-webkit-flex; justify-content:center; align-items:center; } .tipBox label { padding:5px 8px; display:inline-block; background:#393838; border-radius:8px; line-height:1.5; font-size:2em; color:#ffffff; font-weight:500; max-width:80vw; text-align:center; } </style> </head> <body> <!--弹窗--> <div class="tipBox"> <div> <label id="tipBox"></label> </div> </div> <button class="bu">点我显示</button> <script> window.onload = function(){ //提示弹窗 function tipBoxfirst(tip) { $("#tipBox").html(tip); $(".tipBox").fadeIn(); setTimeout(function() { $(".tipBox").fadeOut() }, 1500) } $(".bu").click(function(){ tipBoxfirst("这里是弹窗信息，1.5秒后自动消失秒后自自动消失秒后自自动消失秒后自自动消失自自动消失秒后自自动消失秒后自自动消失自自动消失秒后自自动消失秒后自自动消失自自动消失秒后自自动消失秒后自自动消失自自动消失秒后自自动消失秒后自自动消失自自动消失秒后自自动消失秒后自自动消失自自动消失秒后自自动消失秒后自自动消失自自动消失秒后自自动消失秒后自自动消失自自动消失秒后自自动消失秒后自自动消失秒后自自动消失秒后自动消失~"); }); }; </script> </body> </html>
