浏览 2451 次
锁定老帖子 主题:自适应大小的MsgBox
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2011-04-09
<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> 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2011-04-09
_hide()方法修改
function _hide(jq_msgbox){ jq_msgbox.remove() ; } ; 原因 : 以免浪费资源 |
|
返回顶楼 | |