Click here to Skip to main content
13,409,601 members (41,758 online)
Click here to Skip to main content
Add your own
alternative version


34 bookmarked
Posted 25 Apr 2011

Popup window in Web using jQuery and CSS

, 25 Apr 2011
Rate this:
Please Sign up or sign in to vote.
A simple way to show a popup window in a web application.

Snapshot Bangladesh


A popup window is a very common thing in Windows programming. If a message is to be given from a program, we just do a MessageBox.Show("Hello!! Its working!"). But in web?? That is not that easy!! I always curse myself while web programming asking why there is no MessageBox.Show() or any dialog pop up. You may have an idea like javascript:window.alert(). But I'm sure that it will never satisfy you.

But a decent solution is possible with the help of CSS and jQuery. The following sections describe a way to make a pop up window appear in a web application.


As this program shows a way using CSS and jQuery, it will be helpful if you get a clear idea of CSS and jQuery. We will also be using ASP.NET MVC. For getting the whole picture, the following links are recommended:

Using the Code

The main idea is, in the body of the HTML code, there would be a <div> which will be initially empty but will work like a container. Whenever I want to make something pop up, I'll put my HTML code into that container and show it to the user.

The following diagram shows every step of the process; the steps are described in the following sections.


At first, we put the <div> tag in our HTML file and give it a name, like PopupDiv here. Associate a CSS class with it:

    position: fixed;
    display: none;
    top: 20%;

In the above CSS code, we put the popup container as a fixed position relative to the browsing window as given by the top and left attribute.

Step 1: RequestPopUp

Now in our main HTML file, we put a button for which a JavaScript function would be called.

function showPopup(id) {            
    $.get('<%= Url.Content("~/PopUp/GetPopUp") %>', { id: id }, setData);
  function setData(data) {
    // Logic using the html data

In this JavaScript function, the GET method of the PopUpController.GetPopUp() action method is called. The action method is in the backend using C# code. The action method executes its own logic and communicates with the model and then returns the partial view to the JavaScript. In the JavaScript GET method, we have a setData function which captures the data and does its own logic for the popup, described later.

Steps 2, 3: Get Popup Data

Now the context resides with the controller named PopUpController in its GetPopUp() action.

public ActionResult GetPopUp(int id)
   // Communication with the model
    return View("UserControl/PopupView"); // The defined View in the project

In the controller action, the controller communicates with the model. In this case, the BDInfoRepository class object returns its necessary information. The controller populates the partial view (user control) PopupView.ascx with the ViewData dictionary object. Then it automatically calls the JavaScript setData function with the data parameter assigned as View HTML.

Steps 4, 5: Fill the popup container and show to the user

Ladies and gentlemen, we are eagerly waiting for the jQuery code in action. Here it is, as Dr. Robert Langdon starts his investigation!! Previously, the controller did its job and sent the data to the JavaScript. Now setData holds the ancient symbol secret:

function setData(data) {
    // putting the data to the pop up div
    // viewing the div as block

At first, the $("#PopupDiv").html(data); statement fills our beloved pop container with the HTML data given by the model. But wait! It's still not visible. Because we didn't made it visible as display:none; is assigned. So let's assassinate the attribute by using the jQuery statement $("#PopupDiv").css("display","block"); as it modifies the CSS as display:block;.

Now as our popup containing div is shown as a block, it will block other controls and will be visible as a popup window.

Final touch

We have got what we wanted!! Let's go find another adventure!! But wait. We are stuck in the stupid popup window. We need a exit the pop up. We should make the popup view look like below:

// Customized Html
< button onclick="CloseWindow()">Close
function CloseWindow() {
    $("#PopupDiv").css("display", "none");

Here we get an exit when clicking on the close button and we restore the popup window to its previous state. So the mystery is solved. We live another day to find another adventure!


  • Version 1: 25 April, 2011.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Rajin Sayeed S Alam
Software Developer Enosis Solutions
Bangladesh Bangladesh
Do you know me??

You may also be interested in...


Comments and Discussions

GeneralMy vote of 4 Pin
Brian A Stephens6-Dec-13 10:42
professionalBrian A Stephens6-Dec-13 10:42 
Questionpopup Pin
dibyaaryan0073-Oct-13 20:57
memberdibyaaryan0073-Oct-13 20:57 
GeneralMy vote of 5 Pin
md Khakan9-Jul-13 0:35
membermd Khakan9-Jul-13 0:35 
QuestionPartialView instead of View Pin
Mystcreater31-Mar-13 3:57
memberMystcreater31-Mar-13 3:57 
GeneralMy vote of 5 Pin
Amit Kumar Dutta18-Jun-11 20:21
memberAmit Kumar Dutta18-Jun-11 20:21 
GeneralMy vote of 5 Pin
Raul Iloc7-May-11 2:55
memberRaul Iloc7-May-11 2:55 
GeneralRe: My vote of 5 Pin
Rajin Sayeed S Alam7-May-11 20:26
memberRajin Sayeed S Alam7-May-11 20:26 
GeneralMy vote of 4 Pin
jayantbramhankar25-Apr-11 22:59
memberjayantbramhankar25-Apr-11 22:59 
GeneralNice Pin
JrPacheco25-Apr-11 7:42
memberJrPacheco25-Apr-11 7:42 
GeneralRe: Nice Pin
Rajin Sayeed S Alam25-Apr-11 18:47
memberRajin Sayeed S Alam25-Apr-11 18:47 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.180221.1 | Last Updated 26 Apr 2011
Article Copyright 2011 by Rajin Sayeed S Alam
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid