ModalPopUp Using CSS & Div To Reduce the Weight On WebPage
Description:
CSS:
Screen Shots:
Click on the PopUp link
CSS & Div Full fills the Requirement of ModalPopUp Control in Ajax there by we can reduce the weight on the webpage lets see how the code flows.
DivPopUp.aspx:
Here I am using 2 javascript functions names
CSS:
.white_content { display: none; position: absolute; top: 25%; left: 35%; width: 35%; padding: 0px; background-color: white; z-index: 1002; overflow: auto; } .black_overlay { display: none; position: absolute; top: 0%; left: 0%; width: 120em; height: 1000px; background-color: black; z-index: 1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80); } |
Javascript:
Call the ShowSuccessDiv function where u want to show the popup here I am showing on the link button click as follows.
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="DivModalPopUp.aspx.cs" Inherits="DivModalPopUp" %> <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server"> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server"> <script type="text/javascript"> function ShowSuccessDiv() { document.getElementById('Light').style.display = 'block'; document.getElementById('Fade').style.display = 'block'; } function CloseAlertSuccess() { document.getElementById('Light').style.display = 'none'; document.getElementById('Fade').style.display = 'none'; } </script> <div id="Light" class="white_content"> <table cellpadding="0" cellspacing="0" border="0" style="background-color: skyblue;" width="40%"> <tr> <td height="16px" style="padding-right: 3px; padding-top: 2px;"> <a href="#" onclick="javascript:CloseAlertSuccess()"> <img src="Image/cross.png" style="border: 0px" width="13px" align="right" height="13px" /></a> </td> </tr> <tr> <td style="padding-left: 16px; padding-right: 16px; padding-bottom: 16px"> <table align="center" border="0" cellpadding="0" cellspacing="0" style="background-color: #fff" width="100%"> <tr> <td align="center" colspan="2" class="headertext"> Error Validation </td> </tr> <tr> <td> </td> </tr> <tr> <td align="center"> <asp:Label ID="lblError" runat="server" CssClass="error"></asp:Label> </td> </tr> <tr> <td> </td> </tr> <tr> <td align="center"> <asp:Label ID="lblmessage" runat="server" Text="Please Enter UserName"></asp:Label> </td> </tr> <tr> <td> </td> </tr> </table> </td> </tr> </table> </div> <div id="Fade" class="black_overlay"> </div> <asp:LinkButton ID="lnkpoup" runat="server" OnClientClick="javascript:return ShowSuccessDiv();" Text="PopUp"></asp:LinkButton> </asp:Content> |
Screen Shots:
Click on the PopUp link
Modal PopUp Effect As Follows:
Subscribe to:
Post Comments (Atom)
0 Responses to “ModalPopUp Using CSS & Div To Reduce the Weight On WebPage”
Post a Comment