JQuery应用例子

最新推荐文章于 2024-09-17 13:42:29 发布

andy_tocm

最新推荐文章于 2024-09-17 13:42:29 发布

阅读量1.1k

点赞数

分类专栏： AJAX 文章标签： jquery function stylesheet border div javascript

本文链接：https://blog.csdn.net/to_cm/article/details/3954683

版权

AJAX 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JQuery实现弹出信息窗口实例(JQuery+CSS)

jsp页面代码:

========

<head>

<body>
<a href="#" οnmοusemοve="win()" οnmοuseοut="closeWin()">测试弹出信息框(CSS设计)</a> <br>
<div id="win">hello,我是小窗口!有我的信息 </div>

    <a href="javascript:void(0)" οnclick="openWin()">点击我弹出信息框(CSS设计)</a> <br>
    <div id="onWin">
        <div id="title">标题<span id="x" οnclick="closeX()">[关闭]</span></div>
        <div id="content">内容块 </div>
    </div>

</body>

---------------------------------------------

OpenWin.js页面代码:

==============

function win(){
    var v=$("#win");
    v.fadeIn("show");
}

function closeWin(){
    var v=$("#win");
    //v.hide();
    v.fadeOut("slow");

}

function openWin(){
$("#onWin").fadeIn("show");
}

function closeX(){
$("#onWin").fadeOut();
}

---------------------------------------------

OpenWin.css页面代码:

===============

#win {
    border:1px solid blue;
    height:200px;
    width:250px;
    position:absolute;
    top:35;
    left:55;
    display:none ;
}

#onWin{
    border:1px solid red;
    height:200px;
    width:250px;
    position:absolute;
    top:100;
    left:300;
    display:none ;
}

#title{
    background-color: silver;
     text-align : center;
}
#content{
    padding-top: 5px;
}

#x{
    margin-left: 90px;/*设置位置*/
    cursor: pointer; /*设置当鼠标移到位置时变成小手动作*/
}