CSS实现提示框的效果

IE和firefox的dom模型重要的两点差别：

• 使用attr方法来获取属性的时候，IE中的属性节点比firefox多了很多没有定义的节点。
• 文本节点的数量和内容也不一样，有些换行和空格等无意义的东西IE并不会显示，而firefox则会将这些信息保留下来。

doucument在dom中的地位

• document属根节点，是一个虚幻的内容，而html节点是根元素节点，是一个实际的东西。

CSS实现提示框的效果

html页面

    <a onclick="showwin()" href="#">显示浮动窗口</a>
    <div id="win">
        <div id="title">
            标题栏
            <span id="close" onclick="hide()">X</span>
        </div>
        <div id="content">
            内容栏
        </div>
    </div>

css页面

#win { /*窗口有边框*/
    border: 1px red solid;
    width: 300px;
    height: 200px;
    position: absolute;
    top: 100px;
    left: 200px;
    /**
    刚上来不显示
    **/
    display: none;
}

#title {
    background-color: blue;
    /**文字属性**/
    color: yellow;
    padding-left: 3px;
}

#content {
    padding-top: 5px;
    padding-left: 3px;
}

#close {
    margin-left: 230px;
    /**实现小手让用户知道有关闭功能**/
    cursor:pointer;
}

js代码：

function showwin(){
    //三种方式实现打开效果
    var winDom=$("#win");
    //1.JQUERY修改css
    //winDom.css("display","block");
    //2.Jquery的show方法
    //winDom.show("slow");
    //淡入淡出
    winDom.fadeIn("slow");
}

function hide(){
    //三种方式实现关闭效果
    var winDom=$("#win");
    //1.JQUERY修改css
    //winDom.css("display","none");
    //2.Jquery的show方法
    //winDom.hide("slow");
    //淡入淡出
    winDom.fadeOut("slow");
}