JS提示框-CSDN博客

自己写的一个小Tip提示框, 在元素下方显示, 还不是很完善...

引用了JQuery...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
		<style type="text/css">
			#tip {
				position:absolute;
				border:solid 1px green;
				padding:5px 15px 5px 8px;
				top:50px;
				font-size:12px;
				cursor:default;
				font-family:simsun;
				display:none;
				width:300px;
				word-wrap:break-word;
				background-color:#FFF;
			}
			#tip .arr {
				position:absolute;
				margin-top:-12px;
				color:green;
			}
			
			#tip .arr1 {
				position:absolute;
				margin-top:-11px;
				color:white;
			}
			
			#tip .close {
				position:absolute;
				margin:-4px 0px 0px 303px;
				cursor:pointer;
			}
		</style>
        <script type="text/javascript" src="js/jquery.min.js">
        </script>
        <script type="text/javascript">
            $(function(){
				// 需要提示元素的ID,提示语
                var M = {
                    'username': 'Enter Username...',
                    'password': 'Enter Password...'
                };
                var str = '';
                for (m in M) str += ',#' + m;
                str.substr(1);
				// 得到焦点时提示, 失去焦点时隐藏
                $(str).focusin(function(){
                    var obj = this;
                    if (null != obj.id && '' != obj.id) {
                        $('#tip').css({
                            'top': $(obj).offset().top + $(obj).height() + 9 + 'px',
                            'left': $(obj).offset().left + 10 + 'px'
                        }).fadeIn().find('.message').html(M[obj.id]);
                    }
                }).focusout(function(){
                    $('#tip').hide();
                });
            });
        </script>
    </head>
    <body>
        <p>
            Tip
        </p>
        Username: <input id="username" type="text" />
        <br/>
        Password: <input id="password" type="password">
        <div id="tip">
            <span class="arr">◇</span>
            <span class="arr1">&#9670;</span>
            <span class="close" οnclick="javascript:$('#tip').fadeOut()">×</span>
            <span class="message"></span>
        </div>
    </body>
</html>