klik to popup

<link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui-custom.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>
.hide {
     display:none;
    position:absolute;
    top:30px;
    background:#5c9ccc;
    padding:1px;
    z-index:200;
    border-radius: 5px 5px 0 0;
    width:600px;
    margin:10px auto;
}
.hide2 {
   z-index:201;
    padding:10px 0px 0 0px;
}
.head2{
margin:0;
padding:0 30px 10px;
color:white;
}

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

    margin:auto;
    padding:10px;
    background:white;
}
.two{
    vertical-align:top;
    padding:0 10px;
    width:80px;
    float:left;
}
.two div{
vertical-align:top;
padding:10px 0 0;
float:right;
}
.three{
    text-align:top;
    padding:8px 50px 0 0;
    width:40px;
    float:right;
}
.four{
background:#dfeffc;
padding: 0 6px;
}

.clear{
clear:both;
}
.block {
    float:left;
    padding:0 3px;
    width:50px;
}
.block div{
     float:left;
}
.block .txt{
    padding-top:10px;
}

html, body {
    margin: 0;          /* Remove body margin/padding */
    padding: 0;
    overflow: hidden;   /* Remove scroll bars on browser window */
    font-size: 75%;
}
/*Splitter style */

input{

}

#LeftPane {
    /* optional, initial splitbar position */
    overflow: auto;
}
/*
 * Right-side element of the splitter.
*/

#RightPane {
    padding: 2px;
    overflow: auto;
}
.ui-tabs-nav li {position: relative;}
.ui-tabs-selected a span {padding-right: 10px;}
.ui-tabs-close {display: none;position: absolute;top: 3px;right: 0px;z-index: 800;width: 16px;height: 14px;font-size: 10px; font-style: normal;cursor: pointer;}
.ui-tabs-selected .ui-tabs-close {display: block;}
.ui-layout-west .ui-jqgrid tr.jqgrow td { border-bottom: 0px none;}
.ui-datepicker {z-index:1200;}
.rotate
    {
        /* for Safari */
        -webkit-transform: rotate(-90deg);

        /* for Firefox */
        -moz-transform: rotate(-90deg);

        /* for Internet Explorer */
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }
#list2{
    width:600px;
}
#pager2{
    height:60px;

}
</style>


<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-custom.min.js" type="text/javascript"></script>
<script src="js/jquery.layout.js" type="text/javascript"></script>
<script src="js/grid.locale-en.js" type="text/javascript"></script>


<script src="js/ui.multiselect.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.js" type="text/javascript"></script>
<script src="js/jquery.tablednd.js" type="text/javascript"></script>
<script src="js/jquery.contextmenu.js" type="text/javascript"></script>

<table id="list2"></table>
<div id="pager2" ></div>
<script >
jQuery("#list2").jqGrid({
    url:'localset.php',
    datatype: "json",
    height: 255,
    width: 600,
   colNames:['Index','Name', 'Code'],
    colModel:[
        {name:'item_id',index:'item_id', width:65,  sorttype:'integer', searchoptions:{sopt:['eq','ne','le','lt','gt','ge']}},
        {name:'item',index:'item', width:150, sorttype:'string', searchoptions:{sopt:['eq','bw','bn','cn','nc','ew','en']}},
        {name:'item_cd',index:'item_cd', width:200}
    ],
    rowNum:20,
    rowTotal: 200,
    rowList:[20,30,50],
    loadonce:true,
    mtype: "GET",
    rownumbers: true,
    rownumWidth: 40,
    gridview: true,
    pager: '#pager2',
    sortname: 'id',
    viewrecords: true,
    sortorder: "desc",
    caption:"JSON Example"
});
jQuery("#list2").jqGrid('filterToolbar',{searchOperators : true});
jQuery("#gs_item").bind("click", function()
{
show("#gs_item");
});
/*
my function
*/
var active="#gs_item";
function show(t) {
    active=t;

    var $this = $(t);
    var shide = $(".hide3");
    shide.width($(window).width());
    shide.height($(window).height());
    shide.show();
    log('lebar' + $(window).width());

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

    pos = $this.position();
    log("left:" + pos.left + ";top:" + pos.top);
    top = pos.top;
    //log('top:=' + top);
    offset = $this.offset();
    log("left: " + offset.left + "," + offset.top);


    shide.css('top', offset.top + 30);
    shide.css('left', offset.left);
    shide.show();
    log('tampil');
}

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();
    log('start cari data');
    $(".cat").each(function () {

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

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

function log(s) {
    $(".msg").append("<br>" + 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='msg'>

</div>
<div class='hide'>
    <div class='hide2'>
    <h2 class='head2'>Category</h2>
    <div class='four'>
        <div class='two'>
             <input type=checkbox onclick='checkAll();' class='checkAll' />
            <div>Select All</div>
        </div>
        <div class='two'>
            <input type=checkbox onclick='checkNone();' class='checkNone' />
            <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
for($i=1;$i<40;$i++)
{?>
            <div class='block'>
                <div><input type=checkbox value='<?=$i;?>' class='cat' /></div>
                <div class='txt'><?=$i;?></div>
            </div>
<?php
}
?>
            <div style='clear:both'></div>
        </div>
    </div>
</div><div class='hide3' onclick='hideAll()'></div>