<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css"
        rel="stylesheet" type="text/css" />
    <meta charset="utf-8" />
    <script type="text/javascript">
        $(function () {
            $("#dialog").dialog({
                modal: true,
                autoOpen: false,
                width: 1000,
                height: 500
            });
            $("#btnShow").click(function () {
                $('#dialog').dialog('open');
            });
        });
    </script>
 
<script type="text/javascript">
        $(function () {
            $('.index a').click(function (e) {
                var letter = $(this).text().substring(0, 1).toLowerCase();
                $(':checkbox').each(function (i, e) {
                    var parent = $(this).closest('label');
                    if ($.trim(parent.text()).substring(0, 1).toLowerCase() == letter) {
                        parent.closest('li').attr('style', 'display:block');
                    }
                    else {
                        parent.closest('li').attr('style', 'display:none');
                    }
                });
            });
        });   
    </script>
 
 <style>
        input
        {
            display: inline;
            color: Black;
        }
        <style type="text/css">
        ul
        {
            list-style: none;
        }
        .index li
        {
            display: inline-block;
        }
    </style>
 
<form id="form1" runat="server">
    <input type="button" id="btnShow" value="Show Popup" />
    <div id="dialog" style="display: none" align="center">
        <div>
            <div>
                <ul class="index">
                    <li><a href="#">A</a></li>
                    <li><a href="#">B</a></li>
                    <li><a href="#">C</a></li>
                </ul>
            </div>
            <ul>
        </div>
        <ul>
            <li>
                <label>
                    <ul id="list" runat="server" style="list-style-type: none;">
                    </ul>
                </label>
            </li>
        </ul>
        <div id="filters" runat="server">
        </div>
        <input type="text" id="chkfilter">
    </div>
    </div>
    </form>
 
 public void fillcolor()
    {
        string str = string.Empty;
        string str1 = string.Empty;
        string result = string.Empty;
        clsColor objcolor = new clsColor(true);
        clsColorProduct objProduct = new clsColorProduct(true);
        objcolor.getColor();
        for (int i = 0; i < objcolor.ListclsColor.Count; i++)
        {
            str += "<li class='listclass'><div class='filterblock'><input type='checkbox' id=" + objcolor.ListclsColor[i].ColorID + " name='chk' value=" + objcolor.ListclsColor[i].ColorName + " class='category'><div class='font'><div class='Color' style=background-color:" + objcolor.ListclsColor[i].ColorCode + "></div></div><label  class='font' for=" + objcolor.ListclsColor[i].ColorID + ">" + objcolor.ListclsColor[i].ColorName + "</label></div></li>";
            if (objcolor.ListclsColor[i].ColorID != 0)
            {
                str1 += "<td><div class='resultblock' ColorID=" + objcolor.ListclsColor[i].ColorID + " data-tag=" + objcolor.ListclsColor[i].ColorName + "><div class='desc'><div class='desc_text'><div class='main'><div class='sub'><div class='box'>" + objcolor.ListclsColor[i].ColorName + "<span class=''><img height='10px' style='margin-left: 4px;margin: 0px 0px -1px 4px;'/></span></div></div></div></div></div></div></td>";
                objProduct.getColorp();
                for (int j = 0; j < objProduct.ListclsColorProduct.Count; j++)
                {
                }
            }
        }
        list.InnerHtml = str;
        filters.InnerHtml = result;
      
    }
}