Pass ListView selected value as QueryString and open bootstrap Modal Popup using jQuery in ASP.Net

this is not my question Cheer Andrea

Hi,

Share your modal popup html and let us know how you are opening the modal popup previously.

here is my complete code

1 on link button click event modal popup comes and at the same time query string value changes

but in below code query string value changes but modal popup not coming

  <asp:ListView ID="ListView1" runat="server">

        <ItemTemplate>
     
             <div class="list whitebg">
                 <div class="thumbnail">
                 <div class="caption">
          


                     <asp:LinkButton ID="LinkButton1"  runat="server" data-toggle="modal" data-target="#myModal" CssClass="color-btn pull-right"> Send <asp:Label ID="Label6" runat="server" Text="Pro" CssClass="pro"></asp:Label>posal </asp:LinkButton>
                     </div>

          <div class="row">
                <div class="col-md-2">
<asp:Label ID="Label3" runat="server" Text='<%# Eval("projectdate") %>'></asp:Label>
                </div>
                 <div class="col-md-8 nopadding">
                     
                    
                       <h5>
                      <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("buyerimage") %>' CssClass="img-circle pull-left" Width="30px" Height="30px" /> 
              
                <asp:Label ID="Label2" runat="server" Text='<%# Eval("title") %>'></asp:Label>
                         <br />
                       <small>
                             <div class="truncate"> 
                                            
                   <%# Eval("description") %>  </div>
                       </small> 
                        </h5> 

                          

                                            
                        </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>
                 
            
             
         </div> 
              
         <hr class="nomargin" />
              </ItemTemplate>


    </asp:ListView></div>
      
         
           </div>

   
     
        
        
    </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">&times;</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">
    $(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);
            }
            return false;
        });
    });
</script>

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">&times;</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