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>

Have you referenced the jQuery library? Are you getting any javascript console errors? Is the postback occurring before the javascript fires? — Jon P, Nov 04 '16 at 03:37
[This Answer](http://stackoverflow.com/questions/4056627/popupextender-on-imagebutton-inside-gridview-problem/4056689#4056689) of mine might be able to help. It is using ASP.net ajax extensions but the principle is the same. There are also links to more comprehinsive tutorials. — Jon P, Nov 04 '16 at 03:43

Aruna · Accepted Answer · 2016-11-04T03:29:57.767

1

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>

edited Nov 04 '16 at 03:29

answered Nov 04 '16 at 03:16

Aruna

11,959
3
28
42

sir, im calling alert , test for this,,im try o this but not show the modal popup – Nov 04 '16 at 03:22
sir, im try that's work, but not showing popup , im click the button after display black screen, i think (.hide) is a problem – Nov 04 '16 at 04:09
One of your css might be wrong, Chec this working fiddle, `http://jsfiddle.net/balasuar/h3WDq/1705/` – Aruna Nov 04 '16 at 04:21
Sir ,Thanks for the help – Nov 04 '16 at 04:27
@SamD May I know, why you unaccepted my answer? I actually resolved your underlying issue which you forgot it seems. The one you accepted simply has `$('.modal').show();` which is equivalent to `$('#confirm').modal('show');` in my answer. The issue you had is because of what has been explained in my answer. – Aruna Nov 21 '16 at 06:59
sorry for the my mistake,thats is my fault i was up vote wrong question in i asked, – Nov 21 '16 at 07:17

score 0 · Answer 2 · answered Nov 04 '16 at 02:58

0

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();

answered Nov 04 '16 at 02:58

Dasun De Silva

1
1
3

Sir, its not working, can you please explain about it – Nov 04 '16 at 03:21
send me your URL. Then I will try to debug it from my browser and send you exactly working code. – Dasun De Silva Nov 19 '16 at 08:36

score 0 · Answer 3 · answered Nov 04 '16 at 04:23

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>

score 0 · Answer 4 · answered Jul 27 '20 at 08:23

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.

Asp.net bootstrap modal popup not working correctly

4 Answers4