Light Weight Popups

• Download source - 7.69 KB

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:

• Ajax Control toolkit Model Popup Extender

then few more



• JavaScript Modal Popups
• jQuery-dev
• dojo toolkit

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.

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