jquery 弹出一个淡出窗口示例代码

来源：互联网发布：少年包青天1抄袭知乎编辑：程序博客网时间：2024/05/22 06:26

jqueryWindow.js文件代码如下:

//显示浮动窗口
function showWindow(){
   //$("#win").css("display","block");
   //$("#win").show("slow");
   $("#win").fadeTo("slow",0.66);
   $("#win").fadeTo("slow",0.66);
}

//隐藏显示出来的层
function hideWin(){
   //$("#win").css("display","none");

//淡出关闭弹出窗口
$("#win").hide("slow");
}

showWindow.css文件代码如下:

#win{
   width:300px;
   height:150px;
   border:1px red solid;
   position:absolute; /*把div绝对定位*/
   top:30%; /*调整div与上面的距离*/
   left:40%; /*调整div与左面的距离*/
   display:none;
}

#menutitle{
   background-color:blue;
   color:green;
   padding-left:3px;
}

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

#hidewin{
   margin-left:180px;
   cursor:pointer;
}

jqueryWindow.html页面代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>弹出一个浮动窗口</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery-1.4.2.js"></script>
   <script type="text/javascript" src="js/jqueryWindow.js"></script>
    <link rel="stylesheet" type="text/css" href="css/showWindow.css">

</head>

<body>
    <a href="#" onclick="showWindow()">显示浮动窗口</a>
    <div id="win">
        <div id="menutitle">显示一个标题<span id="hidewin" onclick="hideWin()">X</span></div>
        <div id="menucontent">标题内容</div>
    </div><br />
</body>
</html>