May
19
2011

ModalPopup like effect using simple Javascript and Css

Introduction

For most of the situations where we need modal popup, Ajax control toolkit presents easy to use and efficient control named ModalPopupExtender

However, it's always not desirable to use ModalPopupExtender in your project. Sometimes if you are already not using control toolkit in your project

or for some toolkit is too heavy to add on the page for such a small effect which can be easily done with little effort.

I will try to elaborate simple way of creating this effect with help of little Javascript and CSS.

Background

Though very much is already written and explained about this method and though it's advisable to use quick to incorporate Jquery plug-in's to create

this effect (or Ajax Control toolkit). My effort here is to explain how it works and give ready sample.

Article Body

To start with, ModalPopup effect can be seen here in Asp.net Ajax site. We will try to create Modalwindow using CSS and Javascript.

Basic

Modal popup is nothing but page becomes inaccessible. The page is just covered with div having z-index (think 3D) set to make it blocking

entire page. The opacity of overlaying div can be set to make it see through. so that page can be seen in background but blurred and frozen.

Another div the present in same page (which was hidden earlier) becomes visible and its z-index is set higher than that of overlaying div

making it clearly visible and accessible.

How to do it

Let's create a web site in Visual studio or Visual web developer and add new aspx page in it (say Default.aspx)

Now, add one textbox and one button in it. create 2 div's in the page. We will use one for display as modal popup and one to overlay screen.

Firstly, create a div which we will be displayed as modal popup. For demo purpose, I am creating here, one div and adding a label and linkbutton

upon clicking which, modal popup will vanish off.

<div id="modalMsg" style="width:200px;height:100px;border-color:Black;border-style:solid;color:Red;" class="hidemodal">
   Number entered is :  <asp:Label ID="lblResult" runat="server"></asp:Label>
   <asp:LinkButton ID="lnkOk" runat="server" OnClientClick="return
    RemoveModal();" Text="OK">
   </asp:LinkButton>
</div>
 

I have used class named hideModal in above code; will see it later. Now, create another div for overlay purpose.  

<div id="overlay"></div>
 

Now the main part, setting overlay, making modal popup visible etc. This all will be done in CSS. Add following CSS classes in your page

(you can define them in separate cass file. For demo purpose, i am adding them in same page) 

<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>

CSS defined above can do the work, only when the CSS class is applied to div when we want to display modal popup. we would not always want to display modalpopup.

Generally, to display save successful message or to display saved records id modal popup is desirable.

suppose, we want to display value entered in text in ModalPopup after button is clicked.

we would have to create a Javascript function which will take care of popping up modal window and to make it vanish off.

Let's first write few lines in codebehind to call Javascript function and update label in modal div (to test). Use Registerstartupscript to call Js function

lblResult.Text = txtInput.Text
ClientScript.RegisterStartupScript(Me.GetType(), "JsModal", "DisplayModal()", True)

Now, only Javascript function has to be created which will assign css class to overlay and modal message div's. This is very simple task as can be seen

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 IE, Chrome, Firefox (not sure about safari) without any problem.

The output is displayed as this

<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>

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 IE, Chrome, Firefox (not sure about safari) without any problem.

The output is displayed as this

Note that, look and feel of above modal Popup is basic, Css class needs additions to make it better. Also, you can call Javascript function even from client side on button click etc. to display modal Popup before post back happens (depend on scenario of using ModalPopup).

For whoever intrested, here is complete page code to get going

----------------------------- ------------Default.aspx -------------------------------------------------

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default16.aspx.vb" Inherits="Default16" %>

<!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></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:TextBox ID="txtInput" runat="server"></asp:TextBox>
        <br />
        <asp:Button ID="btnsubmit" runat="server" Text="Check Value" />        
    </div>
    <div id="overlay">
    </div>
    <div id="modalMsg" style="width:200px;height:100px;border-color:Black;border-style:solid;color:Red;" class="hidemodal">
       Number entered is :  <asp:Label ID="lblResult" runat="server"></asp:Label>
       <br />
       <br />
       <br />              
       <asp:LinkButton ID="lnkOk" runat="server" OnClientClick="return RemoveModal();" Text="OK"></asp:LinkButton>
    </div>
</form>
</body>
</html>
----------------------------- Default.aspx.vb -------------------------------------------------
Protected Sub btnsubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnsubmit.Click
        lblResult.Text = txtInput.Text
        ClientScript.RegisterStartupScript(Me.GetType(), "JsModal", "DisplayModal()", True)
End Sub

Conclusion

ModalPopup is simple effect of div style. It is easy to create own ModalPopup like effect in Javascript and Css.

If requirment is to simply display some successful message in ModalPopup then, we can avoid using heavy AjaxControlToolkit for such effect.

About Me

You are visiting personal website of Kedar (KK)

Please go here to know more about me

Disclaimer

The opinions expressed here represent my own and not those of my past or present employers.

The concept/code provided on this site may not work as described. If you are using any code provided on this site. Then, please test it thoroughly. I shall not be responsible for any issues arising in the code. 

Month List