这是笔者实际项目中的一个需求，我们先来看看特效。

页面加载时弹出窗口，点击关闭按钮，窗口消失并呈现动画效果。

实现代码如下：

<!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">&nbsp;</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实现的弹窗效果的更多相关文章

  1. 一个基于jQuery写的弹窗效果(附源码)

    最近项目中频繁遇到需要弹出窗口的功能,一直使用浏览器默认的Alert和Confirm弹窗,感觉视觉效果不是那么好,而从网上下载的话又找不到合适的,找到的话有些也是十分臃肿,有时候感觉学习配置的功夫自己 ...

  2. jquery版右下角弹窗效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  3. 16种基于 CSS3 & SVG 的创意的弹窗效果

    在去年,我给大家分享了<基于 CSS3 的精美模态窗口效果>,而今天我要与大家分享一些新鲜的想法.风格和趋势变化,要求更加适合现代UI的不同的效果.这组新模态窗口效果包含了一些微妙的动画, ...

  4. jQuery实现广告弹窗

    首先设置一个固定的窗口位于右下角,效果如下: 代码: jQuery实现广告弹窗.html 之后将该窗口初始设为隐藏,通过代码实现3秒自动显示,5秒自动隐藏,其效果如下: <!DOCTYPE ht ...

  5. 用CSS3动画特效实现弹窗效果

    提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...

  6. 使用 Sticky-Kit 实现基于 jQuery 的元素固定效果

    元素固定效果在网页中应用得很多,比较常见的使用场景有改进导航,显示广告.Sticky-Kit 是一个非常方便的 jQuery 插件,简化了创建/管理粘元素,有复杂的使用功能.这些功能包括:处理多个固定 ...

  7. jQuery模仿人类打字效果插件typetype

    typetype是一款模仿人类打字效果的jQuery插件,typetype非常轻巧,文件不到2K,gzipped压缩后只有578字节,但模仿的效果非常逼真,一字一字的顿出和回删效果,让人惊叹不止,喜欢 ...

  8. jquery实现章节目录效果

    <html><head><title>jquery实现章节目录效果</title> <script type="text/javascr ...

  9. Image Wall - jQuery & CSS3 图片墙效果

    今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...

随机推荐

  1. Redis学习笔记（五） 基本命令：Hash操作

    原文链接:http://doc.redisfans.com/hash/index.html 学习前先明确一下概念,这里我们把Redis的key称作key(键),把数据结构hash中的key称为fiel ...

  2. 笔记--js实现异步

    <script type="text/javascript"> var xhr=false; function createXhr() { var xhobj = fa ...

  3. 从零开始学习SVG

    1 什么是SVG? MDN中的定义是:SVG即可缩放矢量图形(Scalable Vector Graphics,SVG),是一种用来描述二维矢量图形的 XML 标记语言. 简单地说,SVG 面向图形, ...

  4. Java NIO（六）选择器

    前言 Selector选择器是Java NIO中能够检测一到多个NIO通道,并能够知晓通道是否为诸如读写事件做好准备的组件.这样使得一个单独的线程可以管理多个Channel,从而管理多个网络连接.选择 ...

  5. Android自定义日历控件(继承系统控件实现)

    Android自定义日历控件(继承系统控件实现) 主要步骤 编写布局 继承LinearLayout设置子控件 设置数据 继承TextView实现有圆圈背景的TextView 添加Attribute 添 ...

  6. 如何使用pgpool failover_stream.sh自己控制选择指定的master节点

    集群架构: h236:master h237:standby sync h238:standby sync h239:stadnby async h240:standby async h241:sta ...

  7. HDU 4630 No Pain No Game (线段树+离线)

    题目大意:给你一个无序的1~n的排列a,每次询问[l,r]之间任取两个数得到的最大gcd是多少 先对所有询问离线,然后把问题挂在区间的左端点上(右端点也行) 在预处理完质数,再处理一个next数组,表 ...

  8. com.jasson.im.api.APIClient jar包 下载

    包名:ImApi2.3.jar 链接: https://pan.baidu.com/s/1SgeufcaH6y_K-AJEKDZDtw 提取码: 3v78 复制这段内容后打开百度网盘手机App,操作更 ...

  9. 循环语句第3种 FOR ... in ... LOOP END LOOP;

    --------第3种--------  FOR ... in ... LOOP  END LOOP;    BEGIN    FOR i IN 1..10 LOOP      dbms_output ...

  10. 洛谷 2921 记忆化搜索 tarjan 基环外向树

    洛谷 2921 记忆化搜索 tarjan 传送门 (https://www.luogu.org/problem/show?pid=2921) 做这题的经历有点玄学,,起因是某个random题的同学突然 ...