Light-weight Popup using CSS and Javascript..

Hello Friends
Once Again with a Rocking point we have seen lots of Popup till now…..
all are good at their places just search on Google “Model Popup” and you will get a long list of examples and javascripts for popup…
Ajax Control toolkit Model Popup Extender http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/ModalPopup/ModalPopup.aspx
 then few more
 http://www.modalpopups.com/blog/
http://www.jquery-dev.com/2008/12/02/jqmodal-jquery-modal-popup-plugin
one more javascript framework is Dojo http://www.dojotoolkit.org/
here i am also one type of popup… but i am sure you will like it
because it don’t require any kind of configuration and dependencies…

    

it is combination of CSS and javascript… with 70:30 ratio….
means here CSS is used more and rest is javascript….
then also its more power full

so from first sight you can determine its light–weight compare to other model popups

here i have an example…

   1: <input id="Button1" type="button"

   2:      value="Dispay Message" onclick="ShowDiv('DivPopUp')" />

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




if you are using server control like

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

then at Server Side code….


in Page_Load Event

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

now




Put this block of code anywwhere in you page

   1: <div id="DivPopUp" class="PopUpDiv">

   2:        <div class="PopUpHeader" id="DivPopUpHeader">

   3:            <div class="TitleLine">

   4:                My PopUp

   5:            </div>

   6:            <div onclick="HideDiv('DivPopUp');" title="Close" class="CloseButton">

   7:            </div>

   8:        </div>

   9:        <div id="Divcontent">

  10:            <p>

  11:                Your Content Goes Here</p>

  12:        </div>

  13:    </div>

“My PopUp” is  the title of  Modelpopup and put your content in “DivContent”


To make this idea sucessfull we have to add few CSS classes

   1: <style>

   2:         .PopUpDiv

   3:         {

   4:             background-color: White;

   5:             border: 1px solid Black;

   6:             position: fixed;

   7:             display: none;

   8:             top: 15%;

   9:             width: 660px;

  10:             left: 20%;

  11:             padding: 0px;

  12:             height: 450px;

  13:             z-index: 2;

  14:         }

  15:         .PopUpHeader

  16:         {

  17:             font-size: small;

  18:             font-weight: bolder;

  19:             height: 45px;

  20:             position: relative;

  21:             background: url(bg.gif) repeat-x;

  22:             top: 0px;

  23:         }

  24:         .CloseButton

  25:         {

  26:             background: url(close.png) no-repeat;

  27:             float: right;

  28:             cursor: pointer;

  29:             width: 35px;

  30:             height: 35px;

  31:             right: -15px;

  32:             top: -15px;

  33:             position: absolute;

  34:         }

  35:         .TitleLine

  36:         {

  37:             text-align: center;

  38:             float: left;

  39:             width: 90%;

  40:             color: Silver;

  41:             line-height: 25px;

  42:         }

  43:         .LayerDiv

  44:         {

  45:             height: 100%;

  46:             background-color: #030303;

  47:             filter: alpha(opacity=60);

  48:             opacity: 0.6;

  49:             border: 1px solid black;

  50:             position: fixed;

  51:             left: 0;

  52:             top: 0;

  53:             width: 0%;

  54:         }

  55:     </style>

and few Javascript

   1: <script type="text/javascript">

   2:         function HideDiv(DivPopUp) {

   3:             var DivPopUp = document.getElementById(DivPopUp);

   4:             var DivLayer = document.getElementById('DivLayer');

   5:             DivPopUp.style.display = "none";

   6:             DivLayer.style.width = "0%";

   7:         }

   8:         function ShowDiv(DivPopUp) {

   9:             var DivPopUp = document.getElementById(DivPopUp);

  10:             var DivLayer = document.getElementById('DivLayer');

  11:             DivPopUp.style.display = "block";

  12:             DivLayer.style.width = "100%";

  13:         }        

  14:     </script>

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


we can also modify as per our requirement

LiveJournal Tags: JavaScript,css,jquery,Ajax Toolkit,Model Popup,Div

Click to Download  the Source Here
CodeProject All The best… Hope you like this….