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

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

实现代码如下：

<!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. 一名3年工作经验的java程序员应该具备的技能

    一名3年工作经验的Java程序员应该具备的技能,这可能是Java程序员们比较关心的内容.我这里要说明一下,以下列举的内容不是都要会的东西—-但是如果你掌握得越多,最终能得到的评价.拿到的薪水势必也越高 ...

  2. Qt-信号和槽-多对多

    前言:介绍1对多,多对1以及多对多的案例. 一.1对多 演示内容:在QLineEdit输入时,同步label,text browser以及调试输出板同步显示. 1.1 新建工程 1.2 添加部件 拖入 ...

  3. hadoop配置历史服务器

    此文档不建议当教程,仅供参考 配置历史服务器 我是在hadoop1机器上配置的 配置mapred-site.xml <property> <name>mapreduce.job ...

  4. SpringBoot(六) SpirngBoot与Mysql关系型数据库

    pom.xml文件的配置 <dependency> <groupId>org.springframework.boot</groupId> <artifact ...

  5. Guitar Pro 的双十一特惠活动，正在如火如荼进行中...

    11月11日这个令人兴奋的日子又来了.没错,“双十一”所有网购达人狂欢的日子.同时期待已久的Guitar Pro 也将在“双十一”当天,把福利分享与你我.11月11日Guitar Pro 将在麦软商城 ...

  6. （4）pyspark---dataframe清理

    1.交叉表(crosstab): pandas中也有,常和pivot_table比较. 查看家庭ID与评分的交叉表: 2.处理缺失值:fillna withColumn:新增一列数据 cast : 用 ...

  7. event 下鼠标坐标的获取

    event.clientX.event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性 event.pageX ...

  8. HDU 1002 A + B Problem II（ 高精度加法水 ）

    链接:传送门 题意:A + B 高精度,板子题 /************************************************************************* & ...

  9. SPOJ CIRU

    SPOJ CIRU 题意 给出n个圆,求他们覆盖的面积. 解法 自适应Simpson,但需要将圆离散化一下,以保证我们查询的是一个连续的有圆的区间. 奇怪的是我没有离散化,样例都没有过,却把题给A了 ...

  10. BZOJ 2780 Sevenk Love Oimaster (后缀自动机+树状数组+dfs序+离线)

    题目大意: 给你$n$个大串和$m$个询问,每次给出一个字符串$s$询问在多少个大串中出现过 好神的一道题 对$n$个大串建出广义$SAM$,建出$parent$树 把字符串$s$放到$SAM$里跑, ...