jQuery带弹窗事件的日历

来源:https://www.sucaihuo.com/js/2857.html 2017-08-28 22:11浏览(1340) 收藏

一款jQuery带弹窗事件的日历,点击有事件的日期,就可以弹窗显示日历事件的详细内容,支持图文内容的事件弹出层,日历图标样式等都可以自由修改。
jQuery带弹窗事件的日历
分类:悬浮层/弹出层 > 弹窗 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的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>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2