仿goole日历，点击弹出圆形框

首先声明，本例子并不是我独立完成的，是我根据各位网友提供的资料整理的。本例中使用DIV+CSS+JQuery+JavaScript实现。由于本例是仿造goole制作的，自然，中间涉及到了一些关于时间相关的计算。平时的学习工作中，这一块学习的很模糊的同学，可以借此恶补一下。

图片效果：

index.html页面：

html,body,img,div,h1,h2,p,th,td,table{margin:0px;padding:0px;border:0px;}/****************日期格式table*********************/table{border-collapse:collapse;border-spacing:0;}/***********************设置添加弹出框css样式*******************************/.popItem {position:absolute;width:420px;height:160px;z-index:200;}.popItem .close{position:absolute;width:13px;height:14px;background:url("image/activity/google-close.png");top:10px;right:11px;cursor:pointer;}.popItem table {width:100%;}.popItem .TL {width:25px;height:25px;background:url(image/activity/add_LT.gif);}.popItem .TR {width:25px;height:25px;background:url(image/activity/add_RT.gif);}.popItem .TC {border-top:1px solid #ababab;background:white;}.popItem .ML {background:white;border-left:#ababab 1px solid;}.popItem .MR {background:white;border-right:#ababab 1px solid;}.popItem .MC {height:108px;background:white;}.popItem .BL {width:25px;height:25px;background:url(image/activity/add_LB.gif);}.popItem .BC {border-bottom:1px solid #ababab;background:white;}.popItem .BR {width:25px;height:25px;background:url(image/activity/add_RB.gif);}.vPic {position:absolute;width:96px;height:96px;background:url("image/activity/bubble_combined.png");background-position:-54px 0px;z-index:201;}.popItem .label {text-align:left;width:80px;padding-top:5px;padding-bottom:5px;font: 13px Arial,Sans-serif;}.popItem .operate{margin-top:25px;}.popItem .createButton{float:left;width:70px;height:23px;font-size:13px;line-height:25px;text-align:center;cursor:pointer;background:url("image/activity/createButton.gif") no-repeat;}.popItem .moreInfo{margin-left:8px;height:15px;text-decoration:underline;color:#2200CC;cursor:pointer;font-size:13px;line-height:28px;}.popItem .line {border-top:#DDDDDD 1px solid;margin-top:15px;}/************************月视图开始****************************/.monthTable {width:100%;height:100%;}.dayTr {height:120px;}.dayTr .dayTd{border: 1px solid #DDDDDD;vertical-align: top;text-align:right;}.dayTr .noday{border: 1px solid #DDDDDD;vertical-align: top;text-align:right;}.dayTr .dayTime {background:#F8F9FF;font: 13px Arial,Sans-serif;color:#666666;padding-right:5px;}.tempSelect {background:#F0F3FF;}.itemTable {width:100%;}.itemTable td {height:15px;}/*************月视图Items（完整的）*************/.dayItem_all tr {border:0px;}

下载地址：http://download.csdn.net/detail/liu765023051/4913981

1楼wwwwenhuan4小时前

google的东西总是那么好用，所以我们要站在他的肩膀上认真学习。