How to hide the modal popup if another modal popup is open in ASP.NET

Question

I am using multiple modal popup window (bootstrap) in the gridview.

one is for onclick (link button)

second one is for onclick (image button)

i have used two different design popup model (dialog).

i am facing the issue, when i click linkbutton, it is showing two model popup window at the same time.

but, when i click the image button, it will be showing only one window (this is correct)

i have given the hide option also, but still showing both window. (how it will come)

below is my code for reference. kindly review the code and let us know if you need any more info.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type='text/javascript'>
        function openModal() {
            $('[id*=PopModaldoc]').modal('hide');
           $('[id*=PopModal]').modal('show');
           
        }
    </script>
    <script type='text/javascript'>
        function openModaldoc() {
             $('[id*=PopModal]').modal('hide');
            $('[id*=PopModaldoc]').modal('show');
        }
    </script>
<div class="modal fade" id="PopModal" role="dialog">
        <div class="modal-dialog">
             --showing document using iframe
	</div>
</div>
<div class="modal fade" id="PopModalData
" role="dialog">
        <div class="modal-dialog">
            --Showing some table information from database
	</div>
</div>
 <asp:GridView ID="grdcustomer" .....>
 <Columns>
<asp:TemplateField ItemStyle-HorizontalAlign="Center">
      <HeaderTemplate>
      <label style="text-align: center; display: block;">Show</label>
      </HeaderTemplate>
      <ItemTemplate>
      	<asp:LinkButton ID="lnkBtnShow" runat="server" Text="View" 
      	OnClick="ShowDoc"> </asp:LinkButton>
      	<asp:HiddenField ID="HiddenField1" runat="server" Value='<%# Eval("Path")%>' />
      </ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-HorizontalAlign="Center">
      <HeaderTemplate>
      <label style="text-align: center; display: block;">Show</label>
      </HeaderTemplate>
      <ItemTemplate>
      	<asp:ImageButton ID="imgbtnFind" runat="server" ToolTip="Click here for more information" OnClick="MoreDetails"
                                        ImageUrl="~/images/find.JPG" Height="30px" Width="30px" />
      	 />
</ItemTemplate>
</asp:TemplateField>
</columns>
</gridview>

protected void ShowDoc(object sender, EventArgs e)
        {
            int rowIndex = Convert.ToInt32(((sender as LinkButton).NamingContainer as GridViewRow).RowIndex);
            GridViewRow row = grdBills.Rows[rowIndex];
            string FPath = (row.FindControl("HiddenField1") as HiddenField).Value;
            string sMineType = MimeMapping.GetMimeMapping(FPath);
            if (!string.IsNullOrEmpty(FPath))
            {
                    byte[] rawFile = File.ReadAllBytes(FPath);
                    iframe.Attributes["src"] = $@"data:{sMineType};base64,{Convert.ToBase64String(rawFile)}";
                    ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "openModal();", true);
             }
                
        }
  protected void MoreDetails(object sender, EventArgs e)
        {
            int rowIndex = Convert.ToInt32(((sender as ImageButton).NamingContainer as GridViewRow).RowIndex);
            GridViewRow row = grdBills.Rows[rowIndex];
            var Id = (row.FindControl("Id") as Label).Text; //Get Bill Id
            //Label label = (Row.FindControl("ImageErrorLabel") as Label);
            --Getting specific from database and filling in the dataset
            if ((ds.Tables[0].Rows.Count > 0))
            {
                 this.grdcustomer.DataSource = ds.Tables[0];
                 this.grdcustomer.DataBind();
                ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "openModaldoc(
();", true);
            }
                
        }

Answer 1

Hi @Gani_tpt,

I tested your code and found that it works fine if you change the position, the code is as follows:

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 <script type='text/javascript'>
     function openModal() {          
        $('[id*=PopModal]').modal('show');
        $('[id*=PopModaldoc]').modal('hide');
     }
 </script>
 <script type='text/javascript'>
     function openModaldoc() {
         $('[id*=PopModal]').modal('hide');
         $('[id*=PopModaldoc]').modal('show');
     }
 </script>

Best regards,
Lan Huang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.