Hi nauna,
On link button click you need to open the modal popup.
Refer the below example.
HTML
<div>
<asp:ListView ID="ListView1" runat="server">
<ItemTemplate>
<div class="list whitebg">
<div class="thumbnail">
<div class="caption">
<asp:LinkButton ID="LinkButton1" runat="server" CssClass="color-btn pull-right">
Send
<asp:Label ID="Label6" runat="server" Text="Pro" CssClass="pro"></asp:Label>posal
</asp:LinkButton>
</div>
<h5>
<asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("buyerimage") %>' CssClass="img-circle pull-left"
Width="40px" />
<asp:Label ID="Label2" runat="server" Text='<%# Eval("title") %>'></asp:Label>
<br />
<small>
<asp:Label ID="Label3" runat="server" Text='<%# Eval("projectdate") %>'></asp:Label>
</small>
</h5>
</div>
<div class="row">
<div class="col-md-10 nopadding">
<div class="truncate">
<%# Eval("description") %>
</div>
</div>
<div class="col-md-1 bold center">
<asp:Label ID="Label4" runat="server" Text='<%# Eval("budget") %>'></asp:Label></div>
<div class="col-md-1 center">
<asp:Label ID="Label5" runat="server" Text='<%# Eval("totaloffer") %>'></asp:Label></div>
</div>
</div>
<hr class="nomargin" />
</ItemTemplate>
</asp:ListView>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content sahdow">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">
Send
<asp:Label ID="Label10" runat="server" Text="Pro" CssClass="pro"></asp:Label>posal</h4>
</div>
<div class="modal-body greybg">
<div class="form nopadding">
<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine"></asp:TextBox></div>
<asp:LinkButton ID="LinkButton2" runat="server" CssClass="color-btn pull-right">Send</asp:LinkButton>
</div>
</div>
</div>
</div>
<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.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript">
$(function () {
$('[id*=LinkButton1]').on('click', function () {
var id = $(this).closest('div[class="list whitebg"]').find('[id*=Label2]').html();
var oldURL = window.location.protocol + "//" + window.location.host + window.location.pathname;
var newUrl = oldURL + "?Id=" + id;
if (window.history != 'undefined' && window.history.pushState != 'undefined') {
window.history.pushState({ path: newUrl }, '', newUrl);
$('#myModal').modal('show');
}
return false;
});
});
</script>
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
System.Data.DataTable dt = new System.Data.DataTable();
dt.Columns.AddRange(new System.Data.DataColumn[] {
new System.Data.DataColumn("buyerimage"), new System.Data.DataColumn("title"), new System.Data.DataColumn("projectdate"),
new System.Data.DataColumn("description"), new System.Data.DataColumn("budget"), new System.Data.DataColumn("totaloffer")});
dt.Rows.Add("~/Img1.jpg", "title1", "date 1", "description 1", "budget 1", "offer 1");
dt.Rows.Add("~/Img2.jpg", "title2", "date 2", "description 2", "budget 2", "offer 2");
dt.Rows.Add("~/Img3.jpg", "title3", "date 3", "description 3", "budget 3", "offer 3");
ListView1.DataSource = dt;
ListView1.DataBind();
}
}
Screenshot
