How to use jquery modal popup in asp.net

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="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://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.

How to use jquery modal popup in asp.net
 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.

modal popup using jquery in asp.net c#
<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.

jquery modal popup example asp.net
.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.

How to use jQuery modal popup in Asp.Net
 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.

jquery modal popup asp.net c#

Here you can also add close button to close the dialog. So you need to add the below code.

jquery modal popup asp.net
buttons: {
                Close: function () {
                    $(this).dialog('close');
                }
            }
jQuery modal popup in Asp.Net

You may like the following Asp.Net tutorials:

In this tutorial, we discussed how to use jQuery modal popup in Asp.Net.

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

>