i have code but i want to open popup on click which is having fuctionallities that is working in code.popup bg color should be light grey
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><div class='filterblock'><input type='checkbox' id=" + objcolor.ListclsColor[i].ColorID + " name='check' 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++)
{
if (objcolor.ListclsColor[i].ColorID == objProduct.ListclsColorProduct[j].ColorID)
{
result += "<td><div class='resultblock' data-tag=" + objcolor.ListclsColor[i].ColorName + "><div class='desc'><div class='desc_text'><img width='100px' src='" + ConfigurationManager.AppSettings["path"].ToString() + "Product_Color/Product_Color/a/" + objProduct.ListclsColorProduct[j].ProductID + "/" + objProduct.ListclsColorProduct[j].ProductID + ".jpg" + "' alt='" + objProduct.ListclsColorProduct[j].ProductName + @"' /></div></div></div></td>";
sugg.Visible = true;
}
}
}
}
list.InnerHtml = str;
filters.InnerHtml = result;
sugg.InnerHtml = str1;
}
<script src="http://code.jquery.com/jquery-git2.js" type="text/javascript"></script>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function () {
$('.category').on('change', function () {
var category_list = [];
$('#list :input:checked').each(function () {
var category = $(this).val();
category_list.push(category);
});
if (category_list.length == 0)
$('.resultblock').fadeIn();
else {
$('.resultblock').each(function () {
var item = $(this).attr('data-tag');
if (jQuery.inArray(item, category_list) > -1)
$(this).fadeIn('slow');
else
$(this).hide();
});
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="Div1" runat="server" visible="false">
<table>
<tr>
<td rowspan="2">
<div class="container card">
<label class="text">
Color</label>
<asp:TextBox ID="txtnames" class="textbox" runat="server" placeholder="Search Color"
onkeyup="filter(this)" />
<ul id="list" runat="server" style="list-style-type: none;">
</ul>
<div id="filters" runat="server">
</div>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="searchresults" runat="server" id="resultdata">
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div id="sugg" runat="server" visible="false">
</div>
</td>
</tr>
</table>
</div>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
<script type="text/javascript">
function filter(element) {
var value = $(element).val();
$("#list > li").each(function () {
if ($(this).text().search(value) > -1) {
$(this).show();
}
else {
$(this).hide();
}
});
}
</script>
<script type="text/javascript">
$(".resultblock").click(function () {
var item = $(this).attr('ColorID');
$("input:checked").each(function () {
$(this).prop("checked", false);
});
});
</script>
</form>
</body>
</html>
