JQuery实现的弹窗效果

来源：互联网发布：淘宝账号怎么买编辑：程序博客网时间：2024/06/06 05:49

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

这里写图片描述

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

<!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

图片资源可以从源码中获取。

0 0