May 27, 2013

ModalPopup like effect using simple JavaScript and CSS

In Ajax control toolkit, you find many fantastic controls, one of them is "ModalPopupExtender". This extender is not always a desirable choice to use because sometimes you are not using control kit in your project.

To start with, you can seen ModalPopup effect here. But in this post, I try to elaborate simple way of creating this effect using JavaScript and CSS.

What is ModalPopup? 

Its nothing but a page that is inaccessible because it is cover with div having z-index (Like of 3D) set to make it blocking. The opacity of overlaying div can be set to make it see through so that you can seen in background but blurred and frozen.

Another div is also present in same page (hidden by default) becomes visible and its z-index is set higher than that of overlaying div making it clearly and also accessible.

Let starts coding. 
  • Create a website in Visual Studio or Visual Web Developer and there you see a .aspx page named as (Default.aspx). 
  • Open Default.aspx page, here we need controls like (1 TextBox and 1 Button. 2 Div's, we'll use one div for display as modal popup and other to overlay screen).
  • Firstly, create a div which we will display as ModalPopup like:

<div id="modalMsg" style="width: 200px; height: 100px; border-color: Black; border-style: solid;
    color: Red;" class="HideModal">
    This is modalpopup window
    <asp:LinkButton ID="lnkOk" runat="server" OnClientClick="return RemoveModal();" Text="OK" />
</div>
  • Now create a div for overlay screen as:
<div id="overlay"></div>
  • To set overlay screen and making popup visible functionality, here we need to add some CSS as:

<style type="text/css">
    .ShowModal
    {
        top: 200px;
        left: 250px;
        z-index: 1000;
        position: absolute;
        background-color: White;
        display: block;
    }
    .HideModal
    {
        display: none;
    }
    .OverlayEffect
    {
        background-color: black;
        filter: alpha(opacity=70);
        opacity: 0.7;
        width: 100%;
        height: 100%;
        z-index: 400;
        position: absolute;
        top: 0;
        left: 0;
    }
</style>
  • After CSS applied on page, add Javascript function has to be created which will assign css class to overlay and modal message div's as:

<script type="text/javascript">
    function DisplayModal()
    {
        document.getElementById("overlay").style.height = document.body.clientHeight + 'px';
        document.getElementById("overlay").className = "OverlayEffect";
        document.getElementById("modalMsg").className = "ShowModal";
    }
    function RemoveModal()
    {
        document.getElementById("modalMsg").className = "HideModal";        
        document.getElementById("overlay").className = "";
        return false;
    }
</script>

  • Now finally add these lines in Default.aspx code behind which call JavaScript function and update label in modal div. This all works using RegisterStartupScript method as: 

protected void SubmitButton_Click(object sender, EventArgs s) 
{
    ClientScript.RegisterStartupScript(this.GetType(), "JsModal", "DisplayModal()", true);
}

After button clicked, DisplayModal function will be called which will set the CSS class of both overlay and modalmessage div.

CSS class takes care of giving appropriate effect. The RemoveModal function used by "OK" button present in modal popup window to vanish the effect.

This method uses only CSS and javascript. so, it works in every browser.

The output is displayed as this



For whoever interested, here is complete page code to get going:


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Modal Popup using JavaScript and CSS</title>
    <style type="text/css">
        .ShowModal
        {
            top: 200px;
            left: 250px;
            z-index: 1000;
            position: absolute;
            background-color: White;
            display: block;
        }
        .HideModal
        {
            display: none;
        }
        .OverlayEffect
        {
            background-color: black;
            filter: alpha(opacity=70);
            opacity: 0.7;
            width: 100%;
            height: 100%;
            z-index: 400;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>

    <script type="text/javascript">
        function DisplayModal()
        {
            document.getElementById("overlay").style.height = document.body.clientHeight + 'px';
            document.getElementById("overlay").className = "OverlayEffect";
            document.getElementById("modalMsg").className = "ShowModal";
        }
        function RemoveModal()
        {
            document.getElementById("modalMsg").className = "HideModal";        
            document.getElementById("overlay").className = "";
            return false;
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="SubmitButton" runat="server" Text="Click Here" OnClick="SubmitButton_Click" />
    </div>
    <div id="overlay"></div>
    <div id="modalMsg" style="width: 200px; height: 100px; border-color: Black; border-style: solid;
        color: Red;" class="HideModal">
        This is modalpopup window
        <asp:LinkButton ID="lnkOk" runat="server" OnClientClick="return RemoveModal();" Text="OK" />
    </div>
    </form>
</body>
</html>

protected void SubmitButton_Click(object sender, EventArgs s) 
{
    ClientScript.RegisterStartupScript(this.GetType(), "JsModal", "DisplayModal()", true);
}