Click here to Skip to main content
13,558,778 members
Click here to Skip to main content
Add your own
alternative version

Tagged as


7 bookmarked
Posted 31 Aug 2010
Licenced CPOL

Light Weight Popups

, 31 Aug 2010
Rate this:
Please Sign up or sign in to vote.
Light Weight Popup with CSS and JavaScript

We have seen lots of popups until now. All are good in specific places. Just search on Google "Model Popup" and you will get a long list of examples and JavaScript for popups such as:

Here I have also one type of popup but I am sure you will like it because it doesn’t require any kind of configuration and dependencies. It is combination of CSS and JavaScript with 70:30 ratio. This means CSS is used here more and the rest is JavaScript. Also it's more powerful.

So from first sight you can determine its light–weight compare to other model popups here I have an example

<input id="Button1" type="button" value="Dispay Message"  önclick="ShowDiv('DivPopUp')" />

Drop the control on which you want to fire ModelPopup and assign the JavaScript event to fire onclick="ShowDiv('DivPopUp')"

If you are using server the control like

<asp:Button ID="Button2" runat="server" Text="Dispay Message" />

then at Server Side code in the Page_Load Event

Button2.Attributes.Add("onclick", "ShowDiv('DivPopUp')");

Now put this block of code anywhere in you page

<div class="LayerDiv" id="DivLayer">
<div class="PopUpDiv" id="DivPopUp">        
<div class="PopUpHeader" id="DivPopUpHeader">           
<div class="TitleLine">My PopUp</div>           
<div title="Close" class="CloseButton" önclick=" HideDiv('DivPopUp'); "> </div>
<div id="Divcontent">
Your Content Goes Here </div>

"My PopUp" is the title of Modelpopup and put your content in "DivContent" To make this idea sucessful we have to add few CSS classes

           background-color: White;
           border: 1px solid Black;
           position: fixed;
           display: none;
           top: 15%;
           width: 660px;
            left: 20%;
            padding: 0px;
            height: 450px;
            z-index: 2;
            font-size: small;
            font-weight: bolder;
            height: 45px;
            position: relative;
            background: url(bg.gif) repeat-x;
            top: 0px;
            background: url(close.png) no-repeat;
            float: right;
            cursor: pointer;
            width: 35px;
            height: 35px;
            right: -15px;
            top: -15px;
            position: absolute;
            text-align: center;
            float: left;
            width: 90%;
            color: Silver;
            line-height: 25px;
            height: 100%;
            background-color: #030303;
            filter: alpha(opacity=60);
            opacity: 0.6;
            border: 1px solid black;
            position: fixed;
            left: 0;
            top: 0;
            width: 0%;

And few JavaScript

<script type="text/javascript">
   function HideDiv(DivPopUp) {
       var DivPopUp = document.getElementById(DivPopUp);
       var DivLayer = document.getElementById('DivLayer'); = "none"; = "0%";
   function ShowDiv(DivPopUp) {
       var DivPopUp = document.getElementById(DivPopUp);
         var DivLayer = document.getElementById('DivLayer'); = "block"; = "100%";

Here are two images which will help us to give quite descent look.


We can also modify as per our requirement and refer it to my blog entry


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


About the Author

Sandeep Prajapati
Software Developer (Senior) Priya Softweb Solutions
India India
Sandeep Prajapati
Software Developer
Priya Softweb Solutions

You may also be interested in...

Comments and Discussions

GeneralReason for my vote of 5 Good Pin
Nigam Patel29-Dec-11 18:24
memberNigam Patel29-Dec-11 18:24 
GeneralReason for my vote of 3 Please try to write in better langua... Pin
dharmesh.chauhan@yahoo.com6-Sep-10 7:53
memberdharmesh.chauhan@yahoo.com6-Sep-10 7:53 
Generalthanks buddy Pin
ransandeep4-Sep-10 8:55
memberransandeep4-Sep-10 8:55 
GeneralRe: ??? Pin
shimpark18-Jul-11 2:52
membershimpark18-Jul-11 2:52 
GeneralReason for my vote of 5 Very Nice .... :) Pin
GPUToaster2-Sep-10 22:43
memberGPUToaster2-Sep-10 22:43 

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
Web03 | 2.8.180515.1 | Last Updated 31 Aug 2010
Article Copyright 2010 by Sandeep Prajapati
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid