In this asp.net tutorial, we will discuss how to use jQuery modal popup in Asp.Net. Here, we will discuss how to display a successful message in a popup to the user.
jQuery modal popup Asp.Net
To use jQuery modal popup in Asp.Net we need to first add the jQuery reference on the page.
And next, you can create the dialog that will call the dialog box on a button click.
Step 1: Add the jQuery reference on your page or you can take the below reference file.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
Step 2: Now we will create a method where you will add your dialog with the below option.
function showmodalpopup() {
$("#popupdiv").dialog({
width: 500,
height: 250,
modal: true,
hide: { effect: 'drop', duration: 250 },
resizable: false,
draggable: false,
position: "center",
closeOnEscape: true
});
};
Step 3: Next, I added a Div where you can call this dialog using Div ID.
<div id="popupdiv" style="min-height: 0px;max-height: none;height: 230px;width: 500px!important;background: beige;text-align: center; display:none;" title="Success">
<br><br><br><br><br><br><br>
<b class="ResultSuccess">
<%=GetLocalResourceObject("lbResult") %></b>
</div>
Step 4: Here I have added a few CSS files which you can take as your reference to apply some style in your Popup.
.ui-dialog-titlebar {
background-color: #80c342;
padding: 5px;
color: white;
height: 20px;
font-weight: bold;
font-size: 13px;
width: 490px;
}
.ResultSuccess{
font-weight: bold;
font-size: 20px;
}
.ui-dialog-titlebar-close {
visibility: hidden;
}
Step 5: Now I am calling this showmodalpopup() from server-side after data successfully inserted in the table.
ScriptManager.RegisterStartupScript(this, GetType(), "Success", "showmodalpopup();", true);
In my submit button click, I called this method if my record inserted successfully. So once data inserted you will get a popup message like the below screenshot.
Here you can also add a close button to close the dialog. So you need to add the below code.
buttons: {
Close: function () {
$(this).dialog('close');
}
}
You may like the following tutorials:
- How to Implement Log4Net in ASP.NET Core Application
- Generate One Time Password (OTP) in Asp.Net using C#.Net
- Gridview in asp.net
- How to include jQuery in SharePoint
- Dropdown selected change event in jQuery Example
- How to handle radio button checked and unchecked events using JavaScript and jQuery
- How to implement expand/collapse in HTML table rows using jQuery
- Run JavaScript after page loaded completely using jQuery
- Create a Custom Calendar in SharePoint using Rest API and jQuery
In this tutorial, we discussed how to use jQuery modal popup in Asp.Net.
Rajkiran is currently working as a SharePoint Consultant in India . Rajkiran having 7+ years of experience in Microsoft Technologies such as SharePoint 2019/2016/2013/2010, MOSS 2007,WSS 3.0, Migration, Asp.Net, C#.Net, Sql Server, Ajax, jQuery etc.He is C#Corner MVP (2 Times).