点击顶部弹出提示层代码实例
分类:实例代码
本章节分享一段代码实例,它实现在网页顶部弹出提示层的效果。
根据参数的设置可以设置提示的是普通消息,还是警告消息,也能够设置提示层的显示时间。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> ul { width: 400px; height: 400px; margin: 0px auto; list-style: none; margin-top: 150px; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> $(function () { $.extend({ Alert: function () { var msgWrap = $('<div>').css({ position: 'fixed', top: '0', zIndex: '10000', width: '30%', minWidth: '320px', margin: 'auto', left: 0, right: 0, background: '#fff' }).appendTo($('body')); var removeBtn = $('<div><span>×</span></div>').css({ extAlign: 'right', display: 'none', fontSize: '1.5em' }); removeBtn.find('span').css({ cursor: 'pointer', display: 'inline-block', padding: '0 10px' }).on('click', function () { msgWrap.find('.msg').remove(); removeBtn.hide(); }); removeBtn.appendTo(msgWrap); msgWrap.hover(function () { removeBtn.slideDown(); }, function () { removeBtn.slideUp(); }); return function (msg, goodNews, showTime) { var options = { msg: msg || '本站url地址是pipipi.net', goodNews: $.type(goodNews) == 'boolean' ? goodNews : true, howTime: showTime }; if ($.type(msg) == 'object') for (var i in msg) options[i] = msg[i]; options.howTime = options.howTime || (options.goodNews ? 1000 : 5000); var msgDiv = $('<div class="msg">').css({ padding: '10px', background: options.goodNews ? '#DEFCD5' : '#F1D7D7', color: options.goodNews ? '#52A954' : '#A95252', fontWeight: '900', textAlign: 'center', overflow: 'hidden', display: 'none', boxShadow: '2px 2px 7px #CCC' }).text(options.msg).appendTo(msgWrap); msgDiv.slideDown(function () { setTimeout(function () { msgDiv.slideUp(300, function () { msgDiv.remove(); }); }, options.howTime); }); } }() }); }); </script> </head> <body> <ul> <li><a href="javascript:$.Alert('前端教程网一')">好消息显示效果</a></li> <li><a href="javascript:$.Alert('前端教程网二',false)">坏消息显示效果</a></li> <li><a href="javascript:$.Alert('前端教程网三',true,300)">能够显示300毫秒的好消息</a></li> <li><a href="javascript:$.Alert('前端教程网四',false,30000)">显示30秒</a></li> </ul> </body> </html>
网站出售中,有意者加微信:javadudu