<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;
}
}