Asp.net bootstrap modal popup not working correctly

Question

I'm trying to use asp.net grid row button for modal popup, its working for alert but cant call modal popup , how can i fix it?

<div id="confirm" class="modal hide fade">
  <div class="modal-body">
    Are you sure?
  </div>
  <div class="modal-footer">
    <button type="button" data-dismiss="modal" class="btn btn-primary" id="delete">Delete</button>
    <button type="button" data-dismiss="modal" class="btn">Cancel</button>
  </div>
</div>

---

 <asp:Button ID="btnDeletes" ToolTip="Delete" CommandArgument="<%# Container.DataItemIndex %>" OnClick="btnDelete_Click1" OnClientClick="test();"
                                                                CssClass="GridDeletebtn" runat="server" />

---

<script>
function test() 
{
    $('#confirm').show();
    alert('df');
}
</script>

Answer 1

Use a ScriptManager tag at the beginning of your modal, else your ScriptManager.RegisterStartupScript would not work. Below is the workaround that I use.

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <asp:ScriptManager ID="ScriptManager" runat="server"></asp:ScriptManager>
    <div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <asp:UpdatePanel ID="upModal" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
                <ContentTemplate>
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title"><asp:Label ID="errorMessage" runat="server" Text=""></asp:Label></h4>
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        </div>
                    </div>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </div>

Code-behind

private void showModal(string error)
        {
            message.Text = error;
            upModal.Update();
            ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$(document).ready(function () {$('#myModal').modal();});", true);
        }

Call the above showModal() function with appropriate message. You may have to add modal header & modal footer if needed.

Answer 2

if you using gridview or repeater then call modal popup by below code its working for me

<a class="btn btn-sm btn-warning" data-toggle="modal" data-target="#Remark_Modal<%# Eval("PrimaryID")%>">
    <i class="fa fa-eye"></i>&nbsp;Details
</a>

<!--Modal-->
<div class="modal fade" id='Remark_Modal<%# Eval("PrimaryID")%>' role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content card-blue-fill">
            <div class="modal-header card-header">
                <button type="button" class="modal-close" data-dismiss="modal" aria-label="Close">
                    <i class="fa fa-2x fa-close"></i>
                </button>
                <h4 class="modal-title"><i class="fa fa-eye"></i>&nbsp; <%# Eval("MissionName")%></h4>
            </div>
            <div class="modal-body card-block">
                <%# Eval("Remark")%>
            </div>
        </div>
    </div>
</div>

Answer 3

When you call, alert('df'), thread will be blocked until you click the "Ok" button of the alert then the postback will happen followed by.

But when you show the modal dialog only (without alert), it won't block the thread and hence postback will happen immediately.

Hence your modal dialogue will be disappeared after postback.

When you add `return false' as below, it will stop the postback.

<asp:Button ID="btnDeletes" ToolTip="Delete" CommandArgument="<%# Container.DataItemIndex %>" OnClick="btnDelete_Click1" OnClientClick="test();return false;" CssClass="GridDeletebtn" runat="server" />

Script

<script>
   function test()
            {
                $('#confirm').modal('show');
                //alert('df');
            }
        </script>   

Html

<div id="confirm" class="modal hide fade" tabindex="-1" role="dialog">
  <div class="modal-body">
    Are you sure?
  </div>
  <div class="modal-footer">
    <button type="button" data-dismiss="modal" class="btn btn-primary" id="delete">Delete</button>
    <button type="button" data-dismiss="modal" class="btn">Cancel</button>
  </div>
</div>  

Answer 4

If you can share a URL that I can test. Then I will try it. Moreover try to catch class name instead of id. some thing like below.

$('.modal').show();