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

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

实现代码如下：

<!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. python中黏包现象

    #黏包:发送端发送数据,接收端不知道应如何去接收造成的一种数据混乱现象. #关于分包和黏包: #黏包:发送端发送两个字符串"hello"和"word",接收方却 ...

  2. C#操作sql时注意点

    ①创建必要的索引 ②使用预编译查询 ③使用参数化sql会执行预编译,第一次执行的时候DBMS会为这个SQL语句进行查询优化并执行预编译 ④调整where子句中的连接顺序 ⑤DBMS一般次用自上而下的顺 ...

  3. MobilNnet

    一.参数数量和理论计算量 1.定义 参数数量(params):关系到模型大小,单位通常为M,通常参数用 float32 表示,也就是每个参数占4个字节,所以模型大小是参数数量的 4 倍 理论计算量(F ...

  4. [置顶] 谷歌大牛 Jeff Dean 是如何成为互联网战神的

    谷歌大牛 Jeff Dean 是如何成为互联网战神的 原文链接: Will Oremus   翻译: 伯乐在线- Lex Lian 译文链接: http://blog.jobbole.com/4772 ...

  5. LAMP 环境搭建备忘 -- Linux的安装（一）

    LAMP指的是 Linux + Apatch + MySQL / MariaDB + PHP/Perl/Python 一套搭建网站服务器的开源软件组合.工作原理图如下: 下面开始环境搭建 1 Linu ...

  6. 2019-03-14 Python爬虫问题 爬取网页的汉字打印出来乱码

    html = requests.get(YieldCurveUrl, headers=headers) html=html.content.decode('UTF-8') # print(html) ...

  7. Selenium：简单的尝试一下

    一.创建maven工程引入依赖 1)创建项目 创建一个简单的maven工程即可 这里我使用jar项目进行简单的演示 2)引入依赖 <dependencies> <dependency ...

  8. centos7下部署FastDFS分布式文件系统

    前言 项目中用到文件服务器,有朋友推荐用FastDFS,所以就了解学习了一番,感觉确实颇为强大,在此再次感谢淘宝资深架构师余庆大神开源了如此优秀的轻量级分布式文件系统,本篇文章就记录一下FastDFS ...

  9. CSS隐藏overflow默认滚动条同时保留滚动效果

    主要应用于移动端场景,仿移动端滚动效果.对于隐藏滚动条,众所周知overflow:hidden,但是想要的滚动效果也没了. 所以对于移动端webkit内核提供一个伪类选择器: .element::-w ...

  10. Having用法

    HAVING 子句对 GROUP BY 子句设置条件的方式与 WHERE 和 SELECT 的交互方式类似.WHERE 搜索条件在进行分组操作之前应用:而 HAVING 搜索条件在进行分组操作之后应用 ...