jquery实现窗口显示隐藏

最新推荐文章于 2022-10-26 11:30:17 发布

tuiyidelongdidi

最新推荐文章于 2022-10-26 11:30:17 发布

阅读量347

点赞数

分类专栏： Jquery 文章标签： javascript 开发工具 java ViewUI

本文链接：https://blog.csdn.net/tuiyidelongdidi/article/details/84357376

版权

Jquery 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

环境：tomcat7，jdk1.7。

开发工具：IntelliJ IDEA

使用jquery-1.8.2.js

1.页面：jquerywindeow.jsp

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 12-11-16
  Time: 上午9:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
  <head>
    <title>显示悬浮窗</title>
    <script type="text/javascript"  src="js/jquery-1.8.2.js"></script>
    <script type="text/javascript" src="js/jquerywindow.js"></script>
    <link type="text/css" rel="stylesheet" href="css/style.css" />
  </head>
  <body>
        <a οnclick="showwindw()" href="#">显示悬浮窗</a>
        <a οnclick="hiddenwindw()" href="#">隐藏悬浮窗</a>
        <div id="win">
            <div id="title">
               <span id="t1">悬浮窗口</span>

               <span id="close" οnclick="hiddenwindw()">
                   关闭
               </span>
            </div>
            <div id="content">这是一个窗口！？</div>
        </div>
  </body>
</html>

2.jquerywindow.js（jquery实现功能）

var winNode;
function showwindw(){
    //alert("显示悬浮窗");


    //第一种改变css属性值的方法。，分开写
     winNode=$("#win");
    //设置css属性
    //第1种:name,value
    //winNode.css("display","block");
    //第2种 :{name:properties,name:properties}
    //winNode.css({display:"block"});
    // $("#win").css({display:"block"});


    //第二种显示方法：通过show（）方法
    winNode.show(600);
    //还可以使用其他的方法效果，查看jquery api的效果查看方法
}
function hiddenwindw(){
    //淡入效果
    winNode.fadeOut(700);
}

3.style.css

#win{
    /*设置边框*/
    border : 1px solid green;
    /*设置边框的宽高*/
    height: 250px;
    width: 400px;
    /*设置边框位置*/
    position :absolute;
    top: 200px;
    left: 500px;
    /*隐藏标签*/
    display: none;
}
#title{
    background: #006666;
    font-size: 15px;
    color:oldlace;
    /*标签的高度*/
    height: 27px;
    /*内边距*/
    padding-top:6px;
}
#close{
    /*margin-top:6px;*/
    /*右浮动*/
    float: right;
    /*鼠标放到上面是小手显示，和连接一样*/
    cursor: pointer;
}
#content{
    /*内边距*/
    padding-top: 50px;
}

tuiyidelongdidi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery实现窗口显示隐藏

环境：tomcat7，jdk1.7。开发工具：IntelliJ IDEA使用jquery-1.8.2.js 1.页面：jquerywindeow.jsp &lt;%-- Created by IntelliJ IDEA. User: Administrator Date: 12-11-16 Time: 上午9:37 To change this...
复制链接

扫一扫