一款jQuery带弹窗事件的日历,点击有事件的日期,就可以弹窗显示日历事件的详细内容,支持图文内容的事件弹出层,日历图标样式等都可以自由修改。
页面的head部分,需引入页面元素的样式文件,代码如下:
<link type="text/css" rel="stylesheet" href="css/style.css"/>
页面的body部分,需设置好日历和弹窗的div容器,部分代码如下:
<h1>jQuery带弹窗事件的日历</h1>
<section id="modal">
<div class="wrapper">
<div class="content">
<div class="close"></div>
<div class="box"></div>
</div>
</div>
</section>
<section id="calendar" class="collectonme">
<div id="day-labels">
<div class="label">Sun</div>
<div class="label">Mon</div>
<div class="label">Tue</div>
<div class="label">Wed</div>
<div class="label">Thu</div>
<div class="label">Fri</div>
<div class="label">Sat</div>
</div>
<div id="one" class="week">
<div class="day noDate"></div>
<div class="day noDate"></div>
<div class="day">
<span class="date">1</span>
<div class="surprise">
<h2>A Hilarious Design Classic</h2>
<p>For your first day, I present for your reading pleasure a wonderful classic comic by the incomparable Matthew Inman (aka The Oatmeal).</p>
<a class="button" href="http://www.sucaihuo.com" target="_blank">Read On</a>
</div>
</div>
<div class="day">
<span class="date">2</span>
<div class="surprise">
<h2>For Your Second Day, Some Humor</h2>
<p>A user interface is like a joke. If you have to explain it, chances are it's not that good.</p>
</div>
</div>
页面的底部,需引入jQuery库和其他两个JS文件,代码如下:
<script type="text/javascript" src='js/jquery.min.js'></script>
<script type="text/javascript" src='js/snowfall.jquery.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791