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">
×</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
