jquery 弹出窗口

最新推荐文章于 2024-08-27 15:59:21 发布

vrwind

最新推荐文章于 2024-08-27 15:59:21 发布

阅读量1.2k

点赞数

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

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<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 οnclick="showWin()" href="#" mce_href="#">弹出窗口</a>
    <div id="win">
        <div id="title">我是标题栏！<span id="close" οnclick="hide()">X</span></div>
        <div id="content">我是一个窗口！</div>
    </div>
</body>
</html>

练习一下弹出窗口^_^

vrwind

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 弹出窗口

Jquey Test $(function () { showWin(); setTimeout(hide,2000); }); function showWin() { /*找到div节点并返回*/ var winNode
复制链接

扫一扫

专栏目录