自适应大小的MsgBox

<style type="text/css">
			.msg-box {
				padding :0px ;
				margin : 0px ;
				border : 3px solid #999 ;
				position : absolute ;
			}
			.h {
				padding-left : 10px ;
				margin : 0px ;
				height : 23px ;
				line-height : 23px ;
				font-size : 13px ;
				font-family : arial ;
				font-weight : bold ;
				color : #000 ;
				background-image : url(img/title.gif) ;
			}
			.b {
				padding-left: 12px ;
				padding-right: 10px ;
				padding-top : 10px ;
				padding-bottom : 14px ;
				margin : 0px ;
				line-height : 20px ;
				font-size : 12px ;
				font-family : arial ;
				color : #000 ;
			}
			.close_command {
				padding : 0px ;
				margin : 0px ;
				height : 36px ;
				text-align : center ;
				background : #eee ;
			}
			.close_command  input {
				padding : 0px ;
				margin-top : 6px ;
				width : 60px ;
				cursor : pointer ;
				height : 24px ;
				line-height : 24px ;
				text-align : center ;
				font-size : 12px ;
				font-family : arial ;
				color : #000 ;
			}
		</style>
		
		<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
		
		<script type="text/javascript">
		$(function(){
			var params = {
				title : "提示" ,
				text : "对不起,您输入的用户名或密码不正确!"
			} ;
			MsgBox.show(params) ;
		}) ;
		
		var MsgBox = function(){
			function _render(title,text){
				var msgbox = $("<div></div>")
						.addClass("msg-box")
						.appendTo("body") ;
				var h = $("<div></div>")
						.addClass("h")
						.html(title)
						.appendTo(msgbox) ;
				var b = $("<div></div>")
						.addClass("b")
						.html(text)
						.appendTo(msgbox) ;
				var closeCommand = $("<div></div>")
						.addClass("close_command")
						.appendTo(msgbox) ;
				var close = $("<input type='button' />")
						.attr("value","确定")
						.click(function(){
							var jq_msgbox = $(this).parents(".msg-box") ;
							_hide(jq_msgbox) ;
						})
						.appendTo(closeCommand) ;
				var _top = parseInt(document.documentElement.clientHeight / 2 - b.height() / 2) ;
				var _left = parseInt(document.documentElement.clientWidth / 2 - b.width() / 2) ;
				var _css = {
					top : _top  + "px" ,
					left : _left  + "px" ,
					display : "none"
				} ;
				msgbox.css(_css) ;
				return msgbox ;
			} ;
			function _hide(jq_msgbox){
				jq_msgbox.fadeOut() ;
			} ;
			function show(params){
				var title = params.title || "提示信息" ;
				var text = params.text || "这是测试数据" ;
				var jq_msgbox = _render(title,text) ;
				jq_msgbox.show("normal") ;
			} ;
			return {
				show : show
			} ;
		}() ;
		</script>

评论

1 楼 ziyuewang 2011-04-09  

_hide()方法修改

function _hide(jq_msgbox){  
  jq_msgbox.remove() ;  
} ;

原因 : 以免浪费资源