Popups using Event Delegation

by OmShiv

HTML

<div id="buttons">
	<span id="b1" class="button"> 1</span>
	<span id="b2" class="button"> 2</span>
	<span id="b3" class="button"> 3</span>
	<span id="b4" class="button"> 4</span>
	<span id="b5" class="button"> 5</span>
	<span id="b6" class="button"> 6</span>
	<span id="b7" class="button"> 7</span>
	<span id="b8" class="button"> 8</span>
	<span id="b9" class="button"> 9</span>
	<span id="b10" class="button"> 10</span>
	<span id="b11" class="button"> 11</span>
	<span id="b12" class="button"> 12</span>
	<span id="b13" class="button"> 13</span>
	<span id="b14" class="button"> 14</span>
	<span id="b15" class="button"> 15</span>
	<span id="b16" class="button"> 16</span>
	<span id="b17" class="button"> 17</span>
	<span id="b18" class="button"> 18</span>
	<span id="b19" class="button"> 19</span>
	<span id="b20" class="button"> 20</span>
	<span id="b21" class="button"> 21</span>
</div>

<div id="popup" class="popup">
	<div class="content"></div>
</div>

CSS

body { padding: 20px; }
#buttons { width: 300px; overflow: hidden; }
.button {
    float: left;
    margin-top: 10px;
    padding: 7px 10px;
    margin-right: 10px;
    border: 1px solid #888;
    cursor: pointer;
    border-radius: 4px;
}

#popup {
    position: absolute;
    cursor: pointer;
    display: none;
    padding: 5%;
    text-align: center;
    top: 20%;
    left: 20%;
    border-radius: 2px;
    border: 1px solid #888;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    background: rgba(255, 255, 255, 0.8);
}

JavaScript

var parentDiv = document.querySelector('#buttons'),
	popUp = document.querySelector('#popup');
popUp.title = "Click to dismiss me";

parentDiv.addEventListener('click', function(e) {
	var evt = e || windoe.event,
		target = evt.target || evt.srcElement;

	if (evt && target && target.className == 'button') {
		popUp.querySelector('.content').innerHTML = 'I am triggered by button id - <strong>' + target.id + '</strong>';
		// All functional logic for this popup goes here
		// .. code ..
		popUp.style.display = "inline";
	}
}, false);

popUp.addEventListener('click', function(e) {
	popUp.style.display = "none";
}, false);