click - popup

<link rel="stylesheet" type="text/css" media="screen" href="themes/cupertino/jquery-ui-1.10.3.custom.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/ui.multiselect.css" />
<style>
.tes
{
    width:300px;
    margin:20px 200px;
}
.head2{
    margin:0;
    padding:0 30px 5px;
    color:white;
}

.hide {
     display:none;
    position:absolute;
    top:30px;
    background:#5c9ccc;
    padding:1px;
    z-index:200;
    width:600px;
    margin:10px auto;
}
.hide2 {
   z-index:201;
    padding:10px 0px 0 0px;
}

.hide3 {
    display:none;
    position:fixed;
    top:0;
    left:0;
    z-index:100;
    opacity:0.5;
    filter:alpha(opacity=80);
    /* For IE8 and earlier */
    background:gray;
}
li.dua {
    margin:30px 20px;
}
.one {

    margin:auto;
    padding:10px 30px;
    background:white;
}
.two{
    vertical-align: top;
    padding: 11px 25px 0;
    width: 120px;
    float: left;
    height: 50px;
}

.two div{
vertical-align:top;
padding: 0  ;
min-width:30px;
float:left;
}

.three{
    text-align:right;
    padding:0px 50px 10px 0;
    width:40px;
    float:right;
    height:50px;
}
.four{
background:#dfeffc;
padding: 5px 6px 0;
margin:0 0 1px 0;

}

.clear{
clear:both;
}
.block {
    float:left;
    padding-bottom:15px;
    width:150px;
}
.block div{
     float:left;
}
.block .txt{

}
</style>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-custom.min.js" type="text/javascript"></script>

<script>
jQuery("#gs_item").bind("click", function()
{
    show("#gs_item");
});

var active="#gs_item";
console.log('tessting');
function show(t) {
    active=t;

    var $this = $(t);
    var shide = $(".hide3");
    h=window.innerHeight; w=$(window).width()
    if(h<600) h=640;
    if(w<1000) w=1024;
    shide.width(w);
    shide.height(h);
    shide.show();


    var shide = $(".hide");
    shide.css('display', 'none');

    pos = $this.position();

    top = pos.top;

    offset = $this.offset();

    divThis = $this.parent();
    n1 = divThis.height()-10;


    posLeft=Math.ceil(  offset.left+20) ;//($(window).width() - /2
    shide.css('top', offset.top + n1);
    shide.css('left', posLeft );
    w=$(window).width() - posLeft -120;
    shide.css('width',w);
    shide.show();

}

function hideAll() {
    var shide = $(".hide3");
    shide.css('display', 'none');
    var shide = $(".hide");
    shide.css('display', 'none');
}

function cariData() {
    var i = 0;
    var ar = new Array();
    $(".cat").each(function () {

        if ($(this).is(':checked')) {

            ar[i] = $(this).val();
            i++;
        }
    });
    s = ar.join(', ');
    $(active).val(s);
}



function checkAll() {
    if ($(".checkAll").is(':checked')) {
        $(".cat").prop("checked", true);
    } else {
        $(".cat").prop("checked", false);
    }
    $(".checkNone").prop("checked", false);
    cariData();
}

function checkNone() {

    $(".checkAll").prop("checked", false);
    $(".cat").prop("checked", false);
    $(".checkNone").prop("checked", false);
    cariData();
}

$(function () {
    $(".cat").change(function () {
        cariData();
        $(".checkAll").prop("checked", false);
    });
    $(".button").button();
});
</script>
<div class='hide'>
    <div class='hide2'>
    <h2 class='head2'>Category</h2>
    <div class='four'>
        <div class='two'>
             <div> <input type=checkbox onclick='checkAll();' class='checkAll' /> </div>
            <div>Select All</div>
        </div>
        <div class='two'>
            <div> <input type=checkbox onclick='checkNone();' class='checkNone' /> </div>
            <div >Select None</div>
        </div>
        <div class='three'>
            <a href="#"onclick='hideAll();'  class='button' >apply</a>
        </div>
        <br class='clear' />
    </div>
        <div class='one'>
<?php
$aBuah=array(
'Apel',
'Jeruk',
'Rambutan',
'Durian',
'Anggur'

);
for($i=1;$i<count($aBuah);$i++)
{?>
            <div class='block'>
                <div><input type=checkbox value='<?=$aBuah[$i];?>' class='cat' /></div>
                <div class='txt'><?=$aBuah[$i];?></div>
            </div>
<?php
}
?>
            <div style='clear:both'></div>
        </div>
    </div>
</div><div class='hide3' onclick='hideAll()'></div>

<div class='tes'>
<input id='gs_item' placeholder='click here' name='gs_item' onclick='show("#gs_item");return false;' />
</div>