jquery模拟的弹出窗口

最新推荐文章于 2021-03-17 02:37:03 发布

原创最新推荐文章于 2021-03-17 02:37:03 发布 · 130 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #CSS #HTML #ViewUI

javascript 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS和JavaScript创建可自定义显示与隐藏的浮动窗口的方法。通过简单的代码示例展示了如何实现窗口的显示效果，包括淡入淡出等动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>浮动窗口</title>
    <script type="text/javascript" src="jslib/jquery.js"></script>
    <script type="text/javascript" src="jslib/jquerywin.js"></script>
    <link type="text/css" rel="stylesheet" href="css/win.css"/>
</head>
<body>
      <a onclick="showwin()" href="#">显示浮动窗口</a>
<!--如何显示一个弹出窗口,可以使用div表示-->
      <!--需要用css来改变这个div的样子-->
      <!--标题栏和内容区-->
    <div id="win">
        <div id="title">标题栏<span id="close" onclick="hide()">X</span></div>
        <div id="content" >我是一个窗口哦！！</div>
    </div>
</body>
</html>


function showwin(){
    //alert("测试方法");
    //1.查找窗口对应的div节点
    var winNode = $("#win");
    //2.让div显示出来
    //方法1  修改节点css值,让其显示
    //winNode.css("display","block");
    //方法2 利用jquery的show方法
    //winNode.show("slow");
    //方法3 利用jquery的fadeIn方法
    winNode.fadeIn("slow");
}
function hide(){
   //1.查找窗口对应的div节点
    var winNode = $("#win");
    //2.让div显示出来
    //方法1  修改节点css值,让其显示
    //winNode.css("display","none");
    //方法2 利用jquery的hide方法
    //winNode.hide("slow");
    //方法3 利用jquery的fadeOut方法
    winNode.fadeOut("slow");
}


/*id选择器*/
#win {
     /*窗口边框*/
    border:1px red solid;
    /*窗口宽度高度固定*/
    width:300px;
    height:200px;
    /*窗口定位*/
    position:absolute;/*绝对定位*/
    top:100px;
    left:300px;
    /*初始话不可见*/
    display:none;
}
/*标题栏样式*/
#title {
    background-color:blue;
    color:yellow;
    /*控制标题栏的左内边距*/
    padding-left:3px;
}

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

#close{
    margin-left:158px;
    /*鼠标进入显示小手状态*/
    cursor:pointer;
}