Wednesday, April 14, 2010

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