JQuery实现的弹窗效果
这是笔者实际项目中的一个需求,我们先来看看特效。
页面加载时弹出窗口,点击关闭按钮,窗口消失并呈现动画效果。
实现代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<script type="text/javascript" src="js/jquery-1.5.min.js"></script>
<style type="text/css">
#infobox{
position:absolute;
width:480px;
height:300px;
border:#ccc solid 1px;
z-index: 9999;
}
#infobox_header h1{
height:30px;
font-size: 18px;
margin-top:0px;
line-height: 30px;
text-align: center;
background-image:url("image/header_bg.png");
}
#infobox_header h1 #close_btn{
width: 15px;
height: 15px;
border:#ccc solid 1px;
float: right;
background-image: url("image/close.png");
margin-top:5px;
margin-right:5px;
cursor: pointer;
}
#noticeinfo{
width:440px;
height:240px;
margin-left: auto;
margin-right:auto;
}
</style>
</head>
<body>
<div id="infobox">
<div id="infobox_header">
<h1>公告信息<div id="close_btn"> </div></h1>
</div>
<div id="noticeinfo">
<p>重大通知,本行于端午节推出xxxx活动,活动内容xxxx,活动截至日期xxxx-xx-xx。</p>
</div>
</div>
</body>
<script type="text/javascript">
$("#infobox").hide();
$(document).ready(function(){
$("#infobox").slideDown(2000);
});
$("#infobox").css({
"left":($(document).width() - 480) / 2,
"top":($(document).height() - 300) / 2
});
$("#close_btn").click(function(){
//$("#infobox").fadeOut(2000);
$("#infobox").hide(2000);
});
$(window).resize(function(){
$("#infobox").css({
"left":($(document).width() - 480) / 2,
"top":($(document).height() - 300) / 2
});
});
</script>
</html>
源码下载:http://download.csdn.net/detail/rongbo_j/8822805
图片资源可以从源码中获取。
JQuery实现的弹窗效果的更多相关文章
- 一个基于jQuery写的弹窗效果(附源码)
最近项目中频繁遇到需要弹出窗口的功能,一直使用浏览器默认的Alert和Confirm弹窗,感觉视觉效果不是那么好,而从网上下载的话又找不到合适的,找到的话有些也是十分臃肿,有时候感觉学习配置的功夫自己 ...
- jquery版右下角弹窗效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 16种基于 CSS3 & SVG 的创意的弹窗效果
在去年,我给大家分享了<基于 CSS3 的精美模态窗口效果>,而今天我要与大家分享一些新鲜的想法.风格和趋势变化,要求更加适合现代UI的不同的效果.这组新模态窗口效果包含了一些微妙的动画, ...
- jQuery实现广告弹窗
首先设置一个固定的窗口位于右下角,效果如下: 代码: jQuery实现广告弹窗.html 之后将该窗口初始设为隐藏,通过代码实现3秒自动显示,5秒自动隐藏,其效果如下: <!DOCTYPE ht ...
- 用CSS3动画特效实现弹窗效果
提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...
- 使用 Sticky-Kit 实现基于 jQuery 的元素固定效果
元素固定效果在网页中应用得很多,比较常见的使用场景有改进导航,显示广告.Sticky-Kit 是一个非常方便的 jQuery 插件,简化了创建/管理粘元素,有复杂的使用功能.这些功能包括:处理多个固定 ...
- jQuery模仿人类打字效果插件typetype
typetype是一款模仿人类打字效果的jQuery插件,typetype非常轻巧,文件不到2K,gzipped压缩后只有578字节,但模仿的效果非常逼真,一字一字的顿出和回删效果,让人惊叹不止,喜欢 ...
- jquery实现章节目录效果
<html><head><title>jquery实现章节目录效果</title> <script type="text/javascr ...
- Image Wall - jQuery & CSS3 图片墙效果
今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...
随机推荐
- 如何解决“因为计算机中丢失php_mbstring.dll”
配置编译环境时,php.exe报系统错误,无法启动此程序,因为计算机中丢失php_mbstring.dll. 在C:\Windows找到php.ini文件,ctrl+f找到extension=php_ ...
- 多元一次方程解法 C++
#include<iostream> #include<math.h> #include<fstream> #include<stdlib.h> usi ...
- python 3.x 学习笔记16 (队列queue 以及 multiprocessing模块)
1.队列(queue) 用法: import queue q = queue.Queue() #先进先出模式 q.put(1) #存放数据在q里 作用: 1)解耦 2)提高效率 class qu ...
- Typescript 模拟实现 多继承
class Animal{ eat():void{ alert("animal eat"); } } class Mamal extends Animal{ breathe() : ...
- Oracle自制事务
数据库事务是一种单元操作,要么全部操作成功,要么全部失败.在Oracle中,一个事务是从执行第一个数据操作语言(DML)语句开始的,直到执行一个COMMIT语句,提交保存事务,或执行一个ROLLBAC ...
- tomcat 和 jboss的热部署(热发布)问题
所谓的热部署(热发布)(下面称为“热部署”),就是说,在web工程发布之后,不可避免的,会遇到修改BUG的问题.现在的热部署就是为了解决这个问题,其功能就是说:在不停止web服务的同时,对jsp和Ja ...
- Type system
Type system[edit] Main articles: Data type, Type system, and Type safety A type system defines how a ...
- Unity 围绕X、Y、Z旋转图例
绿色:绕X 红色:绕Y 蓝色:绕Z PS:这是右手坐标系,Unity为左手坐标系 不知道啥叫左手右手?参见我的另一篇文章http://www.cnblogs.com/36bian/p/7571727. ...
- BarTender无法连接到数据库?原来是微软补丁包捣的鬼
近期有很多BarTender用户反映,在使用BarTender设计打印条码时,经常会出现错误消息6670 的提示,使得BarTender无法连接到数据库,究其原因,原来是微软补丁包捣的鬼.目前海鸥科技 ...
- Pyhton二级操作题练习
# 1.编写一个python程序,输入两个数,比较它们的大小并输出其中较大者. num1 = input('请输入数字X:') num2 = input('请输入数字Y:') if num1.isde ...