一个简单的自定义alert方法

最新推荐文章于 2024-04-14 16:21:13 发布

最新推荐文章于 2024-04-14 16:21:13 发布 · 2k 阅读

文章标签：

#javascript #alert #ViewUI

javascript 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的自定义Alert插件，该插件可以创建具有特定样式和行为的警告消息面板。通过简单的JavaScript函数调用即可在页面上显示带有自定义样式的警告信息。

本文仅仅是为了记住过去经常用到却又总是要重新编写的一些代码片段和一些个人想法，仅此而已。
下面是代码：
注：请先引入jquery库


window.alert = function(msg){
		var config = {
				fontSize:'12px',
				backgroundColor:'#696969',
				fontColor:'#FFFFFF',
				borderRadius:'30px',
				border:'solid 1px #696969',
				padding:'5px 15px'
		};
		var $alertPanel = $("#alertPanel263");
		if($alertPanel.length>0){
			$alertPanel.find("span").html(msg);
		}else{
			var html = new Array();
			html.push('<div id="alertPanel263" style="display:none;position:fixed;width:100%;bottom:20%;text-align:center;z-index:9999999">')
			html.push('<span style="padding:'+config.padding+';border:'+config.border+';font-size:'+config.fontSize+';font-weight: bold;background-color:'+config.backgroundColor+';color:'+config.fontColor+';border-radius:'+config.borderRadius+';-moz-border-radius:'+config.borderRadius+';-webkit-border-radius:'+config.borderRadius+'">')
			html.push(msg)
			html.push('</span></div>');
			$alertPanel = $(html.join(''));
			$("body").append($alertPanel);
		}
		$alertPanel.stop().fadeIn('fast').delay(8000).fadeOut('slow');
	};