环境：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 onclick="showwindw()" href="#">显示悬浮窗</a>
<a onclick="hiddenwindw()" href="#">隐藏悬浮窗</a>
<div id="win">
<div id="title">
<span id="t1">悬浮窗口</span>
<span id="close" onclick="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;
}
分享到：
相关推荐
1. 创建HTML结构：定义一个隐藏的模态窗口和一个触发模态窗口显示的按钮。 ```html 打开模态窗口 <!-- 模态窗口内容 --> ``` 2. 添加CSS样式，确保模态窗口默认隐藏，并为其添加适当的布局和过渡效果。 ```...
标题“jquery实现层的隐藏显示”涉及到的是使用jQuery来控制页面上元素（通常被称为“层”或“div”）的可见性。这一功能在网页设计中十分常见，例如用于弹出窗口、提示信息或者模态对话框的显示与隐藏。 首先，让...
在这个实例中，我们关注的是如何利用jQuery实现一个"点击后显示-隐藏无刷新登录框"的功能，这是一种常见的用户体验优化技术，旨在提高网站的互动性和用户友好性。 首先，我们需要理解“无刷新”登录框的概念。在...
在本文中，我们将深入探讨如何使用jQuery实现一个侧边悬浮窗口的折叠显示和隐藏文字列表效果。这个功能常用于网站的导航菜单、帮助文档或侧边栏信息展示，以节省空间并提供良好的用户体验。 首先，我们需要理解...
在这个案例中，它会包含引入jQuery库的链接，以及使用jQuery实现的加载脚本。开发者通常会在`<head>`标签内引入jQuery库，并在`<body>`标签的`$(document).ready()`函数中编写加载动画的初始化代码，确保在页面内容...
"jquery实现弹出窗口"这个主题涉及到的是使用jQuery来创建一个弹出对话框，通常用于显示警告、确认信息或者进行用户交互，如注册过程中的表单填写。在描述中提到的“注册时弹出框效果”可能是指在用户尝试注册新账户...
在注册一些网站的时候，我们经常看到可以显示密码的情况，今天特意整理了下这个jquery代码分享给大家使用。 使用方法： 1、调用lanrenzhijia.css样式...3、调用jquery代码，如25-29行，将两个关键地方的id调用即可实现
本文将详细探讨如何利用jQuery实现一个绚丽的弹出消息窗口。 首先，理解jQuery的基本语法是实现这一功能的基础。jQuery的核心概念是选择器（Selector），它用于定位HTML文档中的元素。例如，“$(‘#id’)”会选择ID...
这个主题将深入探讨jQuery实现模态窗口的基本原理、方法和最佳实践。 ### 1. 基本概念 模态窗口，又称对话框，是一种用户界面元素，它要求用户与之交互（如点击按钮或输入数据）后才能继续进行其他操作。在网页中...
【jQuery右侧渐变显示隐藏的在线客服代码】是一款基于JavaScript库jQuery实现的交互式功能，常见于许多网站的右下角，为用户提供便捷的在线客服交流渠道。此代码利用了jQuery的动画效果，实现了从右侧渐显至完全展示...
### jQuery实现模式窗口登录 #### 知识点概述 本文将详细介绍如何利用jQuery库来创建一个弹出式登录对话框，这种登录对话框通常被称为模态窗口。此方法适用于Internet Explorer（IE）和Firefox浏览器，并且可以很...
下面我们将详细探讨如何利用jQuery实现模态窗口，以及在描述中提到的"5个Jquery模态窗口"可能包含的具体内容。 1. **基本原理**： jQuery模态窗口通常通过CSS控制样式，JavaScript处理事件和行为来实现。基本思路...
"jquery实现弹出登录窗口"这个主题，主要涉及如何利用jQuery创建一个交互式的弹出登录窗口，增强用户体验。下面将详细介绍实现这一功能的关键步骤和相关知识点。 首先，我们需要理解jQuery的基本用法。jQuery通过...
本文将详细讲解如何利用jQuery实现弹出信息窗口，以及相关的技术要点。 首先，我们要理解jQuery弹出窗口的核心原理。这通常通过创建一个新的div层，将其设置为不显示，然后在需要时通过CSS和JavaScript将其动态显示...
要实现jQuery模态窗口登录效果，你需要以下几个关键步骤： 1. **HTML结构**：首先，你需要在HTML中创建一个隐藏的登录表单。这个表单应该包含用户名和密码输入字段，以及登录按钮。使用CSS将此表单设置为不可见或...
本篇文章将详细讲解如何利用jQuery实现一个美观的“模式窗口”（Modal Window）并结合选项卡功能，为用户提供优秀的体验。 一、jQuery模式窗口（Modal Window） 模式窗口是一种在用户进行特定操作时弹出的覆盖整个...
总的来说，使用jQuery实现弹出窗口中的登录与注册表单切换是一项常见的前端任务，它涉及到DOM操作、事件处理以及可能的表单验证和安全措施。通过熟练掌握jQuery，我们可以创建出更加动态和用户友好的Web应用界面。
例如，你可能希望在隐藏`iframe`后显示一条消息，或者在重新显示`iframe`时提供一个选项。这些可以通过扩展上述代码来实现。 在提供的压缩包文件中，"jquery_点击按钮_隐藏父页-引用页的iframe"可能包含了示例代码...
标题“jquery实现点击图片在弹出层显示大图”描述的是一个常见的功能需求，即用户点击网页中的小图片后，大图会在弹出的层（通常称为模态窗口或Lightbox效果）中显示，再次点击则恢复原图的大小。这个功能在现代网页...