joggler basic popup

plunker cannot do basic selectors :(

by rob Davis

HTML

<body><div class="day-am"><div class="hour asleep"><span>0</span></div><div class="hour asleep"><span>1</span></div><div class="hour asleep"><span>2</span></div><div class="hour asleep"><span>3</span></div><div class="hour asleep"><span>4</span></div><div class="hour asleep"><span>5</span></div><div class="hour asleep"><span>6</span></div><div class="hour awake"><span>7</span></div><div class="hour awake"><span>8</span></div><div class="event event-colour-5">take in and pick up 08:00 </div><div class="hour awake"><span>9</span></div><div class="event event-colour-5">-  09:00</div><div class="hour awake"><span>10</span></div><div class="hour awake"><span>11</span></div></div><div class="day-pm"><div class="hour awake"><span>12</span></div><div class="hour awake"><span>13</span></div><div class="hour awake"><span>14</span></div><div class="hour awake"><span>15</span></div><div class="hour awake"><span>16</span></div><div class="hour awake"><span>17</span></div><div class="hour awake"><span>18</span></div><div class="hour awake"><span>19</span></div><div class="hour awake"><span>20</span></div><div class="hour awake"><span>21</span></div><div class="hour awake"><span>22</span></div><div class="hour asleep"><span>23</span></div></div></body>

CSS

.hour { 
  border:1px solid #dde;
  clear:both;
  float:left;
  width:2em;
  text-align:right;
  font-size:2em;
}

.asleep {
  color:grey;
}
.asleep span
{
  color:grey;
  font-size:smaller;
}

.event-colour-4 {
  background-color:#bbf;
}

.event-colour-5 {
  background-color:#fbf;
}

.event {
  margin-left:0.2em;
  padding-left:1em;
  padding-right:1em;
  width:65%;
  float:left;
}

.day-am {
  width:50%;
  float:left;
}

.day-pm {
  width:50%;
  float:left;
}

.cover {
  position:absolute;
  width:100%;
  height:100%;
  opacity:0.8;
  z-index:100;
  background:#000;
}

.transparent {
    opacity:0;
}

JavaScript

// bind to the transparent div sitting onto of the 'day' layout
// use json embeded in the global html
// show nice popup
// make sure it can be closed

// inject div cover
//var coverDiv = document.createElement('div');
//coverDiv.className = 'cover';
//var target = document.querySelectorAll('body');
//target[0].appendChild(coverDiv);
var elemDiv = document.createElement('div');
elemDiv.className='cover transparent';
document.body.appendChild(elemDiv);
elemDiv.onclick = function (e) {
  e.preventDefault();
    if (elemDiv.className == 'cover') {
        elemDiv.className = 'cover transparent';
    } else {
      elemDiv.className = 'cover';
    }
}