欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jquery实现弹出窗口效果的实例代码

程序员文章站 2022-06-05 09:10:39
javascript实现弹出窗口实质上就是在上画了一个方形区域,并在开始时将其隐藏,只是到某个javascript事件时才通过修改css的属性值来将其显示出来。 其大致步骤为:...

javascript实现弹出窗口实质上就是在上画了一个方形区域,并在开始时将其隐藏,只是到某个javascript事件时才通过修改css的属性值来将其显示出来。

其大致步骤为:

•创建一个装载弹出窗口的p

. 代码如下:


<html>
  <head>
    <title>jquery实例1:浮动窗口</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <mce:script type="text/javascript" src="jslib/jquery.js" mce_src="jslib/jquery.js"></mce:script>
    <mce:script type="text/javascript" src="jslib/jquerywin.js" mce_src="jslib/jquerywin.js"></mce:script>
    <link type="text/css" rel="stylesheet" href="css/win.css" mce_href="css/win.css">
  </head>
  <body>
  </body>
    <a onclick="showwin()" href="#" mce_href="#">弹出窗口</a>
    <p id="win">
        <p id="title">我是标题栏!<span id="close" onclick="hide()">x</span></p>
        <p id="content">我是一个窗口!</p>
    </p>
</html>


•创建相应的css文件将其显示为一个弹出窗口

. 代码如下:


#win{
    /*边框*/
    border:1px red solid;
    /*窗口的高度和宽度*/
    width : 300px;
    height: 200px;
    /*窗口的位置*/
    position : absolute;
    top : 100px;
    left: 350px;
    /*开始时窗口不可见*/
    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;
}


•创建相应的javascript文件来操作窗口的显示

. 代码如下:


function showwin(){
    /*找到p节点并返回*/
    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.fadeout("slow");
    //方法三:jquery的hide方法
    winnode.hide("slow");
}