Monday, 20 May 2013

modal popup

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        .grid
        {
            width: 99%;
            height:120px;
            border: solid 2px #c8c8c8;
            float: left;
          
        }
        .grid_top
        {
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            width: 99%;
            height: auto;
            border: solid 2px #c8c8c8;
            float: left;
            background-color: #c8c8c8;
            -moz-border-radius-topleft: 10px;
            -webkit-border-top-left-radius: 10px;
            -khtml-border-radius-topleft: 10px;
            -moz-border-radius-topright: 10px;
            -webkit-border-top-right-radius: 10px;
            -khtml-border-radius-topright: 10px;
        }
        .PoPUpCloseBtnCRM
        {
            border-radius: 10px;
            background-color: #D3D3D3;
            border: 0;
            border-style: groove;
            font-weight: bold;
            margin-top: 5px;
            margin-right: 5px;
        }
        .PoPUpCloseBtnCRM:hover
        {
            background-color: #FF5050;
        }

       .ModalBackgroundCSS
        {
            width: 100%;
            background-color:Black;
            moz-opacity: 0.5;
            khtml-opacity: .5;
            opacity: .5;
            filter: alpha(opacity=50);
            z-index: 120;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
        .ModalPopUpPanelCommonViewCRM
        {
            z-index: 200;
            background-color: White;
            position: absolute;
            top: 0pt;
            left: 0pt;
            text-align: center;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="sm" runat="server"></asp:ScriptManager>
    <asp:UpdatePanel ID="up" runat="server">
    <ContentTemplate>
     <div>
     <center>
    <asp:HyperLink ID="hp" runat="server" NavigateUrl="#">Add New</asp:HyperLink><br />

 <asp:GridView ID="gv" runat="server"  DataKeyNames="EID"
             onrowcancelingedit="gv_RowCancelingEdit" onrowdeleting="gv_RowDeleting"
             onrowediting="gv_RowEditing" onrowupdating="gv_RowUpdating">
     <Columns>
         <asp:CommandField HeaderText="UPDATE" ShowEditButton="True" ShowHeader="True" />
         <asp:CommandField HeaderText="DELETE" ShowDeleteButton="True"  ShowHeader="True" />
     </Columns>
         </asp:GridView>
 </center>
    <asp:Panel ID="pnlModal" runat="server" Width="400px" CssClass="ModalPopUpPanelCommonViewCRM" style="display:none" >
            <div align="right" style="background-color: #7DA5DB; height: 30px" class="grid_top">
                <asp:Button ID="btnClose" runat="server" Text="X" CssClass="PoPUpCloseBtnCRM" CausesValidation="False"
                    ToolTip="Close" />
            </div>
            <div class="grid">
             <ul style="width:350px; list-style:none">
             <li style="width:120px; list-style:none; float:left; text-align:right; padding-top:3px">EID</li>
              <li style="width:10px; list-style:none; float:left; text-align:center; padding-top:3px">:</li>
              <li style="width:220px; list-style:none; float:left; text-align:left; padding-top:3px"><asp:TextBox ID="tb" runat="server"></asp:TextBox></li>
             </ul>
             <ul style="width:350px; list-style:none">
             <li style="width:120px; list-style:none; float:left; text-align:right; padding-top:3px">NAME</li>
              <li style="width:10px; list-style:none; float:left; text-align:center; padding-top:3px">:</li>
              <li style="width:220px; list-style:none; float:left; text-align:left; padding-top:3px"><asp:TextBox ID="tb1" runat="server"></asp:TextBox>&nbsp;<asp:HyperLink ID="hlp" runat="server" Text="New" NavigateUrl="#"></asp:HyperLink>
              </li>
             </ul>
              <ul style="width:350px; list-style:none">
             <li style="width:120px; list-style:none; float:left; text-align:right; padding-top:5px">&nbsp;</li>
              <li style="width:10px; list-style:none; float:left; text-align:center; padding-top:5px">&nbsp;</li>
              <li style="width:220px; list-style:none; float:left; text-align:left; padding-top:5px">
                  <asp:Button ID="btn" runat="server" Text="Save" Width="80"
                      onclick="btn_Click" />&nbsp;<asp:Button ID="Button1" runat="server" Text="Reset" Width="80" /></li>
             </ul>
            </div>
          
        </asp:Panel>
        <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="hp" PopupControlID="pnlModal" CancelControlID="btnClose" BackgroundCssClass="ModalBackgroundCSS">
        </asp:ModalPopupExtender>
         <asp:Panel ID="Panel1" runat="server" Width="400px" CssClass="ModalPopUpPanelCommonViewCRM" style="display:none" >
            <div align="right" style="background-color: #7DA5DB; height: 30px" class="grid_top">
                <asp:Button ID="Button2" runat="server" Text="X" CssClass="PoPUpCloseBtnCRM" CausesValidation="False"
                    ToolTip="Close" />
            </div>
            <div class="grid">
             <ul style="width:350px; list-style:none">
             <li style="width:120px; list-style:none; float:left; text-align:right; padding-top:3px">DID</li>
              <li style="width:10px; list-style:none; float:left; text-align:center; padding-top:3px">:</li>
              <li style="width:220px; list-style:none; float:left; text-align:left; padding-top:3px"><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></li>
             </ul>
             <ul style="width:350px; list-style:none">
             <li style="width:120px; list-style:none; float:left; text-align:right; padding-top:3px">DNAME</li>
              <li style="width:10px; list-style:none; float:left; text-align:center; padding-top:3px">:</li>
              <li style="width:220px; list-style:none; float:left; text-align:left; padding-top:3px"><asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>&nbsp;<asp:HyperLink ID="HyperLink1" runat="server" Text="New" NavigateUrl="#"></asp:HyperLink>
              </li>
             </ul>
              <ul style="width:350px; list-style:none">
             <li style="width:120px; list-style:none; float:left; text-align:right; padding-top:5px">&nbsp;</li>
              <li style="width:10px; list-style:none; float:left; text-align:center; padding-top:5px">&nbsp;</li>
              <li style="width:220px; list-style:none; float:left; text-align:left; padding-top:5px"><asp:Button ID="Button3" runat="server" Text="Save" Width="80" />&nbsp;<asp:Button ID="Button4" runat="server" Text="Reset" Width="80" /></li>
             </ul>
            </div>
          
        </asp:Panel>
         <asp:ModalPopupExtender ID="ModalPopupExtender2" TargetControlID="hlp" PopupControlID="Panel1" CancelControlID="Button2"  runat="server">
         </asp:ModalPopupExtender>
    </div>
    </ContentTemplate>
    </asp:UpdatePanel>
  
    </form>
</body>
</html>
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)