Popup window in Web using jQuery and CSS

• Download source code - 251 KB

Introduction

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.

Background

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:

• CSS: W3School
• jQuery: W3School
• ASP.NET MVC: ScottGu

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.

Initialization

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:

.Popup
{
    position: fixed;
    display: none;
    top: 20%;
    left:30%;
}

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
    $("#PopupDiv").html(data);
    // viewing the div as block
    $("#PopupDiv").css("display","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!

History

• Version 1: 25 April, 2011.