jQuery UI Current

by petersendidit

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>

<div class="bar">1</div>
<div class="bar">2</div>
<div class="bar">3</div>
<div class="bar">4</div>
<div class="bar">5</div>
<div class="bar">6</div>
<div class="bar">7</div>
<div class="bar">8</div>
<div class="bar">9</div>
<div class="bar">10</div>
<div class="bar">11</div>
<div class="bar">12</div>
<div class="bar">13</div>
<div class="bar">14</div>
<div class="bar">15</div>
<div class="bar">16</div>
<div class="bar">17</div>
<div class="bar">18</div>
<div class="bar">19</div>
<div class="bar">20</div>
<div id="popup">Hide</div>

CSS

.bar {
    width: 50%;
    padding: 20px;
    margin: 20px auto;
    background-color: #CCC;
    text-align: center;
    cursor: pointer;
}

#popup {
    padding: 150px;
    width: 300px;
    background: #333;
    text-align: center;
    color: #FFF;
    display: none;
    z-index: 1000;
}

JavaScript

$('.bar').click(function() {
        $('#popup').css('display', 'block');
        var pressedBar = $(this);
        $('#popup').position({
            my: 'center center',
            at: 'center center',
            of: $(pressedBar),
            offset: '-10 0',
            collision: 'none fit'
        });
    });
    $('#popup').click(function() {
        $('#popup').css('display', 'none');
    });