點擊某按鈕,提示某信息,相信你們常常遇到,用別人的插件總須要修改點,可是修改起來又很費時間,因此乾脆本身寫吧,哈哈。代碼及效果以下:css
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>閃爍提示信息</title> <style> #show_good{ background:orange; position:absolute; display:none; border:2px solid #ffff00; border-radius:5px; text-align:center; } </style> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $(function(){ var windows_width = $(window).width(); var windows_height = $(window).height(); var div_width = 400; var div_height = 100; var div_left = (windows_width - div_width) / 2; var div_top = windows_height / 2 - div_height; var div_css = 'left:' + div_left + 'px;top:' + div_top + 'px;width:' + div_width + 'px;height:' + div_height + 'px;'; var content = '<div id="show_good" style="' + div_css + '">'; content += '閃爍提示信息'; content += '</div>'; $('body').append(content); $('p').click(function(){ $('#show_good').fadeIn(1000,function(){ setTimeout(function(){ $('#show_good').fadeOut(1000); },1000); }); }); //console.log(windows_width,windows_height,div_css); }); }); </script> </head> <body style="background:#ccc;"> <p>閃爍提示信息</p> </body> </html>