i want to display image outside the popup means what i want to do is when i click checkbox after that i have to click on button and then it will fillter data outside the popup
here is code which is working but image are coming inside the popup and image are show as i click checkbox instead of it i want it when i clcik on checkbox the i have to click on button and it will fillter the data outside pup.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<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" 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" />
<link href="https://i3.sdlcdn.com/css/17jan1484753660937/snap/pages/searchResult/scss/searchResult.min.css"
rel="stylesheet" type="text/css">
<link href="https://i2.sdlcdn.com/css/17jan1484753660937/snap/common/scss/base.min.css"
rel="stylesheet" type="text/css">
<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" />
<script type="text/javascript">
$(function () {
$("#dialog").dialog({
modal: true,
autoOpen: false,
width: 877,
height: 500
});
$("#btnShow").click(function () {
$('#dialog').dialog('open');
});
});
</script>
<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>
<input type="button" id="btnShow" value="Show Popup" />
<div id="dialog" style="display: none" align="center">
<div class="btn applyFilters lfloat">
APPLY</div>
<ul>
<li>
<label>
<ul class="checkbox-grid">
<ul id="list" runat="server">
</ul>
</ul>
</label>
</li>
</ul>
<div id="filters" runat="server">
</div>
</div>
</div>
<div>
<%--<tr>
<td colspan="2">
<div class="searchresults" runat="server" id="resultdata">
</div>
</td>
</tr>--%>
<div id="Div2" runat="server">
</div>
</div>
public void cldo()
{
{
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' style='display: inline-flex;'><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++)
{
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 style='width:250px;height:280px;' src='" + ConfigurationManager.AppSettings["path"].ToString() + "images/ProductColor/" + 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;
}
protected void bindimages(object sender, EventArgs e)
{
string str1 = string.Empty;
string result = string.Empty;
clsColor objcolor = new clsColor(true);
clsColorProduct objProduct = new clsColorProduct(true);
int i = 0;
objcolor.getColor();
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 style='width:250px;height:280px;' src='" + ConfigurationManager.AppSettings["path"].ToString() + "images/ProductColor/" + objProduct.ListclsColorProduct[j].ProductID + ".jpg" + "' alt='" + objProduct.ListclsColorProduct[j].ProductName + @"' /></div></div></div></td>";
//sugg.Visible = true;
Div2.InnerHtml = result;
}
}
}
}
}