Click here to Skip to main content
15,889,462 members
Search within:


Popup is not displaying properly
Please Sign up or sign in to vote.
1.00/5 (2 votes)
Hello team, Actually i am trying to show particular div in my code but the div i am trying to display in popup displays for 1 sec then vanishes.So can any one help me through it here is my aspx file
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <link href="App_Themes/StyleSheet3.css" rel="stylesheet" />
    <script type="text/javascript" src="Scripts/Timer/jquery.ui.timepicker.js?v=0.3.3"></script>
    <link rel="stylesheet" href="Scripts/Timer/jquery.ui.timepicker.css?v=0.3.3" type="text/css" />
    <link href="CSS/CustomShared.css" rel="stylesheet" />

</asp:Content>


<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <style>
			.ontop {
				z-index: 999;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				display: none;
				position: absolute;				
				background-color: #cccccc;
				color: #aaaaaa;
				opacity: .4;
				filter: alpha(opacity = 50);
			}
			#popup {
				width: 300px;
				height: 200px;
				position: absolute;
				color: #000000;
				background-color: #ffffff;
				/* To align popup window at the center of screen*/
				top: 50%;
				left: 50%;
				margin-top: -100px;
				margin-left: -150px;
			}
		</style>
		<script type="text/javascript">
		    function pop(div) {
		        document.getElementById(div).style.display = 'block';
		    }
		    function hide(div) {
		        document.getElementById(div).style.display = 'none';
		    }
		    //To detect escape button
		    document.onkeydown = function (evt) {
		        evt = evt || window.event;
		        if (evt.keyCode == 27) {
		            hide('popDiv');
		        }
		    };
		</script>
    <div class="clear"></div>
    <hr />
    <div>
            <asp:FileUpload ID="FileUpload1" runat="server" ForeColor="Red" />
            <asp:RegularExpressionValidator 
            id="FileUpLoadValidator" runat="server" 
            ErrorMessage="Upload only xlsx." 
            ValidationExpression="^(([a-zA-Z]:)|(\\{2}\w+)\$?)(\\(\w[\w].*))(.xlsx)$" 
            ControlToValidate="FileUpload1" ForeColor="Red"></asp:RegularExpressionValidator>
    
            <asp:Button id="UploadBtn" Text="Upload File"  OnClick="UploadBtn_Click" runat="server" Width="105px" />
            <asp:Label ID="lblMessage" ForeColor="Red" runat="server"></asp:Label>
        </div>
    <asp:GridView ID="gvDetails" runat="server" CssClass="grid clsWrap" AutoGenerateColumns="False"  PageSize="20" Width="960px">
        <Columns>
            <asp:BoundField DataField="taskdescription" HeaderText="Work Item"></asp:BoundField>
            <asp:BoundField DataField="fromdate" HeaderText="From Date"></asp:BoundField>
            <asp:BoundField HeaderStyle-CssClass="gridB" DataField="todate" HeaderText="To Date"></asp:BoundField>

        </Columns>
        <HeaderStyle Font-Bold="False" CssClass="Font gvheaderstyle" Wrap="False" />
        <PagerStyle CssClass="gridB" ForeColor="WhiteSmoke" />
        <RowStyle HorizontalAlign="Center" />
    </asp:GridView>
     <%--Start--%>
      <div class="name">Manual Insert Task</div>
    <hr />
    <br />
    <br />
     <div class="clear"></div>
    <div id="error" style="padding-left: 10px" runat="server" visible="true">
        <asp:Label ID="lblError" runat="server" ForeColor="Red"></asp:Label>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" BackColor="Black" ForeColor="White" BorderColor="white"  OnRowCommand="GridView1_RowCommand" OnSelectedIndexChanged="GridView1_SelectedIndexChanged" AllowPaging="True" OnPageIndexChanging="GridView1_PageIndexChanging" PageSize="5" BorderWidth="2px" CellPadding="2" CellSpacing="5" GridLines="None" >
           
            <RowStyle BackColor="Black" />
                <AlternatingRowStyle BackColor="Black" />
                <FooterStyle BackColor="Black" />
                <HeaderStyle BackColor="#ff9933" Font-Bold="True" ForeColor="Black" />
                <PagerStyle BackColor="#ff9933" ForeColor="Black"
                    HorizontalAlign="Center" />
                <SortedAscendingCellStyle BackColor="#F1F1F1" />
                <SortedAscendingHeaderStyle BackColor="#ff9933" />
                <SortedDescendingCellStyle BackColor="Black" />
                <SortedDescendingHeaderStyle BackColor="#00547E" />

             <Columns>
                <asp:TemplateField HeaderText="Task Id">
                    <ItemTemplate>
                        <asp:Label ID="lblTaskId" Text='<%# Eval("TaskId") %>' runat="server" ></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>                           
                <asp:TemplateField HeaderText="Description">
                    <ItemTemplate>
                        <asp:Label ID="lblDescription" Text='<%# Eval("Description") %>' runat="server"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Project Name">
                    <ItemTemplate>
                        <asp:Label ID="lblProjectName" Text='<%# Eval("ProjectName") %>' runat="server"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Area">
                    <ItemTemplate>
                        <asp:Label ID="lblArea" Text='<%# Eval("Area") %>' runat="server"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Work Type">
                    <ItemTemplate>
                        <asp:Label ID="lblWorkType" Text='<%# Eval("WorkItemType") %>' runat="server"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Channel">
                    <ItemTemplate>
                        <asp:Label ID="lblChannel" Text='<%# Eval("Channel") %>' runat="server"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Tags">
                    <ItemTemplate>
                        <asp:Label ID="lblTags" Text='<%# Eval("Tags") %>' runat="server"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Team Name">
                    <ItemTemplate>
                        <asp:Label ID="lblTeamName" Text='<%# Eval("TeamName") %>' runat="server"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Task Name">
                    <ItemTemplate>
                        <asp:Label ID="lblTaskName" Text='<%# Eval("TaskName") %>' runat="server"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Edit">
                    <ItemTemplate>
                        <asp:Button ID="btnEdit" runat="server" Text="Edit" CommandName="EditRow" CausesValidation="false"/>
                    </ItemTemplate>
                </asp:TemplateField>             
            </Columns>
        </asp:GridView>    
    </div>
    <br />
    <div>
        <table>
        <tr>
        <td style="position:relative; left:-35%;"><a href="#" onClick="pop('popDiv')"> <asp:Button ID="btnadd" ValidationGroup="tab2" CssClass="col-centered ts-btn normalbtnsize" runat="server" Text="Add" BackColor="#ff9933" OnClick="btnadd_Click"/></a></td>          
        </tr>
        </table>
    </div>
    <br />
    <div class="clear"></div>
    <div id="popDiv" class="ontop"  >
        <div id="fade" class="black_overlay"></div>
        <div id="tab1" class="tab active">
            <table  class="formwrap center-block2">
               <tr>
                    <td class="auto-style5"></td>
                    <td class="auto-style7"style="color:#fff">Task Id
                        <label style="color: #FF3300">*</label></td>
                    <td class="auto-style4">
                        <table>
                            <tr>
                                <td>
                                    <asp:TextBox ID="txtEmpId" ClientIDMode="Static" placeholder="Task Id" CssClass="ts-inputbox4 left" ValidationGroup="tab1" runat="server" MaxLength="5"></asp:TextBox>
                                </td>
                                <td >
                                    <asp:RequiredFieldValidator ID="rfvEmpId" runat="server" ControlToValidate="txtEmpId" ErrorMessage="Task Id cannot be blank" Display="None" ForeColor="#FF3300"></asp:RequiredFieldValidator>
                                    <
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                  <tr>
                    <td class="auto-style5"></td>
                    <td class="auto-style7"style="color:#fff">Description
                        <label style="color: #FF3300">*</label></td>
                    <td class="auto-style4">
                        <table >
                            <tr>
                                <td>
                                    <asp:TextBox ID="TextBox1" ClientIDMode="Static" placeholder="Description" CssClass="ts-inputbox4 left" ValidationGroup="tab1" runat="server"></asp:TextBox>
                                </td>
                                 <td style="padding-left:200px;">
                                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtEmpId" ErrorMessage="Description cannot be blank" Display="None" ForeColor="#FF3300"></asp:RequiredFieldValidator>

                                </td>
                            </tr>

                        </table>
                    </td>
                </tr>
                <tr>
                    <td class="auto-style5"></td>
                    <td class="auto-style7"style="color:#fff">Project Name
                        <label style="color: #FF3300">*</label></td>
                    <td class="auto-style4">
                        <table>
                            <tr>
                                <td>
                                    <asp:TextBox ID="TextBox2" ClientIDMode="Static" placeholder="Project Name" CssClass="ts-inputbox4 left" ValidationGroup="tab1" runat="server"></asp:TextBox>
                                </td>
                                <td>
                                    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtEmpId" ErrorMessage="Project Name cannot be blank" Display="None" ForeColor="#FF3300"></asp:RequiredFieldValidator>

                                </td>
                            </tr>

                        </table>
                    </td>
                </tr>
                <tr>
                    <td class="auto-style5"></td>
                    <td class="auto-style7"style="color:#fff">Area
                        <label style="color: #FF3300">*</label></td>
                    <td class="auto-style4">
                        <table>
                            <tr>
                                <td>
                                    <asp:TextBox ID="TextBox3" ClientIDMode="Static" placeholder="Area" CssClass="ts-inputbox4 left" ValidationGroup="tab1" runat="server"></asp:TextBox>
                                </td>
                                <td>
                                    <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="txtEmpId" ErrorMessage="Area cannot be blank" Display="None" ForeColor="#FF3300"></asp:RequiredFieldValidator>

                                </td>
                            </tr>

                        </table>
                    </td>
                </tr>
                <tr>
                    <td class="auto-style5"></td>
                    <td class="auto-style7"style="color:#fff">Work Type
                        <label style="color: #FF3300">*</label></td>
                    <td class="auto-style4">
                        <table>
                            <tr>
                                <td>
                                    <asp:TextBox ID="TextBox4" ClientIDMode="Static" placeholder="Work Type" CssClass="ts-inputbox4 left" ValidationGroup="tab1" runat="server"></asp:TextBox>
                                </td>
                                <td>
                                    <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="txtEmpId" ErrorMessage="Work Type cannot be blank" Display="None" ForeColor="#FF3300"></asp:RequiredFieldValidator>

                                </td>
                            </tr>

                        </table>
                    </td>
                </tr>
                <tr>
                    <td class="auto-style5"></td>
                    <td class="auto-style7"style="color:#fff">Channel
                        <label style="color: #FF3300">*</label></td>
                    <td class="auto-style4">
                        <table>
                            <tr>
                                <td>
                                    <asp:TextBox ID="TextBox5" ClientIDMode="Static" placeholder="Channel" CssClass="ts-inputbox4 left" ValidationGroup="tab1" runat="server"></asp:TextBox>
                                </td>
                                <td>
                                    <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ControlToValidate="txtEmpId" ErrorMessage="Channel cannot be blank" Display="None" ForeColor="#FF3300"></asp:RequiredFieldValidator>

                                </td>
                            </tr>

                        </table>
                    </td>
                </tr>
                <tr>
                    <td class="auto-style5"></td>
                    <td class="auto-style7"style="color:#fff">Tags
                        <label style="color: #FF3300">*</label></td>
                    <td class="auto-style4">
                        <table>
                            <tr>
                                <td>
                                    <asp:TextBox ID="TextBox6" ClientIDMode="Static" placeholder="Tags" CssClass="ts-inputbox4 left" ValidationGroup="tab1" runat="server"></asp:TextBox>
                                </td>
                                <td>
                                    <asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server" ControlToValidate="txtEmpId" ErrorMessage="Tags cannot be blank" Display="None" ForeColor="#FF3300"></asp:RequiredFieldValidator>

                                </td>
                            </tr>

                        </table>
                    </td>
                </tr>
                <tr>
                    <td class="auto-style5"></td>
                    <td class="auto-style7"style="color:#fff">Team Name
                        <label style="color: #FF3300">*</label></td>
                    <td class="auto-style4">
                        <table>
                            <tr>   
                                <td >
                        <asp:DropDownList ID="List" CssClass="ts-inputbox4 left" runat="server" style="width:220px">
                            <asp:ListItem Value="-1">-SELECT-</asp:ListItem>
                            <asp:ListItem Text="Abacus" Value="Analysis"></asp:ListItem>
                             <asp:ListItem Text="MMR" Value="Planning"></asp:ListItem>
                              <asp:ListItem Text="Product" Value="Execution"></asp:ListItem>                            
                        </asp:DropDownList>
                               </td>
                            </tr>

                        </table>
                    </td>
                </tr>
              <tr>
                    <td class="auto-style5"></td>
                    <td class="auto-style7"style="color:#fff">Task Name
                        <label style="color: #FF3300">*</label></td>
                    <td class="auto-style4">
                        <table>
                            <tr>
                                <td>
                                    <asp:TextBox ID="TextBox9" ClientIDMode="Static" placeholder="Task Name" CssClass="ts-inputbox4 left" ValidationGroup="tab1" runat="server"></asp:TextBox>
                                </td>
                                <td>
                                    <asp:RequiredFieldValidator ID="RequiredFieldValidator9" runat="server" ControlToValidate="txtEmpId" ErrorMessage="Task Name cannot be blank" Display="None" ForeColor="#FF3300"></asp:RequiredFieldValidator>

                                </td>
                            </tr>

                        </table>
                      </td>      
                </tr>  
              </table>
            <br />
            <table>
             <tr>                           
                  <td style="position:relative; right:15%;"><asp:Button  ID="btnsubmit" ValidationGroup="tab2" CssClass="col ts-btn normalbtnsize" runat="server" Text="Submit" BackColor="#ff9933"/></td>
                  <td style="position:relative; left:-17%;"> <asp:Button ID="btnfinddata" ValidationGroup="tab2" CssClass="col-centered ts-btn normalbtnsize" runat="server" Text="Cancel" BackColor="#ff9933"  /></td>
                                
                </tr>
                </table>
            </div>
        </div>


What I have tried:

ON click of this button
<table>
        <tr>
        <td style="position:relative; left:-35%;"><a href="#" onClick="pop('popDiv')"> <asp:Button ID="btnadd" ValidationGroup="tab2" CssClass="col-centered ts-btn normalbtnsize" runat="server" Text="Add" BackColor="#ff9933" OnClick="btnadd_Click"/></a></td>          
        </tr>
        </table>

i am trying to show this div


<div class="clear"></div>
    <div id="popDiv" class="ontop"  >
        <div id="fade" class="black_overlay"></div>
        <div id="tab1" class="tab active">
            <table  class="formwrap center-block2">
               <tr>
                    <td class="auto-style5"></td>
                    <td class="auto-style7"style="color:#fff">Task Id
                        <label style="color: #FF3300">*</label></td>
Posted
Updated 9-Aug-17 2:07am
Add a Solution
Comments
Karthik_Mahalingam 9-Aug-17 2:49am    
what does btnadd_Click event do?
Member 11644373 9-Aug-17 3:48am    
at present it just display div whenever button is clicked

but with the help of btnadd_click i want to show that in popup
F-ES Sitecore 9-Aug-17 5:02am    
When you click the button the div is shown but you're also submitting the form so a new copy of the page is requested and navigated to so the page is "reset" back to how it is on-load. If you don't need server-code to run when you click the button then use a normal html submit button and cancel the form submission when it is clicked. That's done by having "onclick" return false. Google for exact syntax.

If you do need server code to run on that button click then you'll need to show the pop-up on-load after the form submission rather than on the button click.

1 solution

When you are clicking that button (which is actually an ASP.NET button wrapped in an anchor), two things are happening:
1. Client side onclick of the anchor, which displays the pop-up
2. Server side onclick of the button, which reloads the entire page...
So you see the pop-up only of the time the page reloads...
You have to understand what post and post-back is. What client and server separation is. What AJAX is.
And what do you actually want to do when creating such a hybrid code...
 
Share this answer
 
Posted
Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise
Privacy
Cookies
Terms of Use
Last Updated 9 Aug 2017
Layout: fixed | fluid
Copyright © CodeProject, 1999-2024
All Rights Reserved.

Web03 2.8:2024-04-02:1

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900