jquery 弹出窗口

最新推荐文章于 2024-10-26 16:03:13 发布

转载最新推荐文章于 2024-10-26 16:03:13 发布 · 1.2k 阅读

文章标签：

#jquery #javascript #function #div #border #css

jquery 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的弹窗效果示例。该示例通过fadeIn和fadeOut方法实现了窗口的淡入淡出效果，并设置了自动隐藏功能。同时，还提供了手动关闭窗口的功能。

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

<head>
    <title>Jquey Test</title>    
    <script language="javascript" type="text/javascript" src="jquery-1.6.min.js"></script>
    <script language="javascript" type="text/javascript">
        $(function () {
            showWin();
            setTimeout(hide,2000);
        });

        function showWin() {
            /*找到div节点并返回*/
            var winNode = $("#win");
            //方法一：利用js修改css的值，实现显示效果   
            // winNode.css("display", "block");   
            //方法二：利用jquery的show方法，实现显示效果   
            // winNode.show("slow");   
            //方法三：利用jquery的fadeIn方法实现淡入   
            winNode.fadeIn("slow");
        }
        function hide() {
            var winNode = $("#win");
            //方法一：修改css的值   
            //winNode.css("display", "none");   
            //方法二：jquery的fadeOut方式
            //winNode.animate({top:"-500px"},10000);
            winNode.fadeOut("slow");
            //方法三：jquery的hide方法   
            winNode.hide("slow");
        } 
  </script>

  <style type="text/css">
  #win{   
    /*边框*/  
    border:1px red solid;   
    /*窗口的高度和宽度*/  
    width : 300px;   
    height: 200px;   
    /*窗口的位置*/  
    position : absolute;   
    right :0px;   
    bottom: 0px;   
    /*开始时窗口不可见*/  
    display : none;   
}   
/*控制背景色的样式*/  
#title{   
    background-color : blue;
    color : red;   
    /*控制标题栏的左内边距*/  
    padding-left: 3px;   
}   
#cotent{   
    padding-left : 3px;   
    padding-top :  5px;   
}   
/*控制关闭按钮的位置*/  
#close{   
    margin-left: 188px;   
    /*当鼠标移动到X上时，出现小手的效果*/  
    cursor: pointer;   
}  

  </style>


</head>
<body>
<a onclick="showWin()" href="#" mce_href="#">弹出窗口</a>
    <div id="win">
        <div id="title">我是标题栏！<span id="close" onclick="hide()">X</span></div>
        <div id="content">我是一个窗口！</div>
    </div>
</body>
</html>

练习一下弹出窗口^_^