JQuery实现的弹窗效果

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

JQuery实现的弹窗效果_第1张图片

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

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