Open (Show) Bootstrap Modal Popup after AJAX Call Success in ASP.Net

Last Reply 2 months ago By pandeyism

Posted 2 months ago

i need to show/open a pop up afther the susses in ajax i tried this 

else if (result == 2) {
    $('#getCodeModal').html(output).modal('show');
}

but doest work 

help me plz

Posted 2 months ago

Hi fr3eddy,

Refer below sample.

HTML

<script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
<link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css'
    media="screen" />
<script type="text/javascript">
    $(function () {
        $("#btnSubmit").click(function () {
            var body = $('[Id*=txtName]').val();
            $("#MyPopup .modal-body").html("Welcome to " + body);
            $.ajax({
                type: "POST",
                url: "Default.aspx/SendParameters",
                data: "{name: '" + $("#txtName").val() + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {
                    $("#MyPopup").modal("show");
                }
            });
        });
        $("#btnClosePopup").click(function () {
            $("#MyPopup").modal("hide");
        });
    });
</script>
<!-- Bootstrap -->
Name:
<br />
<input type="text" id="txtName" value="" class="form-control" />
<br />
<input type="button" id="btnSubmit" value="Submit" class="btn btn-success" />
</br>
<!-- Modal Popup -->
<div id="MyPopup" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    &times;</button>
                <h4 class="modal-title">
                    Greetings
                </h4>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <input type="button" id="btnClosePopup" value="Close" class="btn btn-danger" />
            </div>
        </div>
    </div>
</div>

Code

C#

[System.Web.Services.WebMethod()]
public static string SendParameters(string name)
{
    return string.Format("Name: {0}", name);
}

VB.Net

<System.Web.Services.WebMethod()>
Public Shared Function SendParameters(ByVal name As String) As String
    Return String.Format("Name: {0}", name)
End Function

Screenshot