Opening Popup using jQuery in MVC

Here we are going to see how we can show popup using jQuery.

jQuery Popup:

Required dependencies:

  1. jQuery library
  2. jQuery UI library
  3. jQuery CSS library

To show the content into the popup I have created one Partial View. To create Partial View, create one action method inside your controller and then go to Add View. Give a name to view and select ‘Create as a partial view’ and then click on Add button.

click on the Add button

The View that you have added gets created at the following location: Views, JqueryPopUp, then JqueryPopup.chtml

JqueryPopup

Now I have included the required files i.e. jQuery and jQuery UI files.

JQuery UI

Now to open the popup we need to write small JavaScript code and one div element as in the following code snippet:

javascript code

Now click on the Open jQuery Popup Button to see the result.

Open JQuery Popup Button