Click here to Skip to main content
Click here to Skip to main content

Light Weight Popups

By , 31 Aug 2010
Rate this:
Please Sign up or sign in to vote.

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>      
<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>        
<div id="Divcontent">
Your Content Goes Here </div>
</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


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

And few JavaScript

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

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

[close2.png]
[bg2.gif]

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

License

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
Follow on   Twitter

Comments and Discussions

 
GeneralReason for my vote of 5 Good PinmemberNigam Patel29-Dec-11 18:24 
GeneralReason for my vote of 3 Please try to write in better langua... Pinmemberdharmesh.chauhan@yahoo.com6-Sep-10 7:53 
Generalthanks buddy Pinmemberransandeep4-Sep-10 8:55 
GeneralRe: ??? Pinmembershimpark18-Jul-11 2:52 
GeneralReason for my vote of 5 Very Nice .... :) PinmemberGPUToaster2-Sep-10 22:43 

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

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

| Advertise | Privacy | Mobile
Web01 | 2.8.140415.2 | Last Updated 31 Aug 2010
Article Copyright 2010 by Sandeep Prajapati
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid