locked
How to Add modal popup window when clicking the button RRS feed

  • Question

  • User-786564416 posted

    I have the following form source. When clicking the button ExtendDeadline, I want to see a modal popup form

    <%@ Page Language="VB" MasterPageFile="~/MasterPages/MyMasterPage.master" AutoEventWireup="false" CodeFile="ShowPostingDetails.aspx.vb" Inherits="Pending_ShowPostingDetails"  MaintainScrollPositionOnPostback="true" %>
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
        <style type="text/css">
                    
                            
             .MainFieldsDivStyle
            {
                border-color: Black;
                width: 65%;
                border-style: solid;
                margin-top: 22px;
                background-color:#C9DCF2;
                opacity: 0.8;
                -moz-border-radius: 15px;
                -webkit-border-radius: 15px;
                border-radius: 15px;
            }     
            
             .ExCellStyle
            {
                background-color:#20FFFF;
                border-color:Black;
                border-style:solid;
                border-width:1px;
            }     
                 
            .CellStyle
            {
                border: 1px solid Black;
                background-color:#7DE6FF;
            }
              
            .HeaderLetterCellStyle
            {
                border: 1px solid Black;
                background-color:#8AE18A;
                
            }
    
            .BorderingStyle
            {
                border: 1px solid Black;
            }
    
            .CommentsHeaderStyle {
                border: 1px solid Black;
                background-color: #5D7B9D;
                text-align: center;
                color: #FFFFFF;
                font-family: "Sakkal Majalla";
                font-size: 26px;
            }
    
            .MessageHeaderStyle {
                border: 1px solid Black;
                text-align: center;
                color: #FFFFFF;
                font-family: "Sakkal Majalla";
                font-size: 26px;
            }
    
            .SubjectFieldStyle
            {
                font-family:"Sakkal Majalla";
                font-size:16pt;
            }  
            .CommentButton {
                margin-left: 14px;
            }
    
            .RequestButton {
                margin-left: 14px;
            }
    
            .HyperLinkStyle img
            {
                height:40px;
                width:70px;
                vertical-align:middle;   
            } 
            .CellStyle
            {
                background-color:#7DE6FF;
                border-color:Black;
                border-style:solid;
                border-width:1px;
            }
           
    
    
            .EmptyDataRowStyle
            {
                font-family:SC_AMEEN;
                font-size: 46px;
                width:100%;
                text-align:center;
            }
    
            .Grid
            {
                margin-right:0px;
                margin-top: 0px;
                margin-left: 0px;
                text-align: center;
                font-family: 'Sakkal Majalla';
                font-size: x-large;
            }
           
           .Buttonout
            {
                cursor:default;
                -moz-border-radius: 15px;
                -webkit-border-radius: 15px;
                border-radius: 15px;
            } 
              
             .Buttonhover
            {
                cursor:pointer;
                -moz-border-radius: 15px;
                -webkit-border-radius: 15px;
                border-radius: 15px;
            }
    
            </style>
        
        
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="CpMainContent" Runat="Server">
        <!-- Required jQuery Reference -->
        <script type="text/javascript" src="<%= ResolveUrl("~/jquery/js/jquery-1.8.2.min.js")%>"></script>
        <!-- Idle Timer Plugin Reference -->
        <script type="text/javascript" src="<%= ResolveUrl("~/jquery/js/idle-timer.min.js")%>"></script>
    
        <%--<script type="text/javascript">
    
            $(document).on("idle.idleTimer", function (event, elem, obj) {
                // Once the timer is idle (after 10 seconds), perform an event (your redirect)
                alert("Session has Expired.You will be required to relogin.");
                window.location.href = 'SessionExpiry.aspx';
            });
    
            // Define a timer for 30 minutes
            $.idleTimer(30 * 60 * 1000);
    
        </script>--%>
        
        <asp:toolkitscriptmanager ID="ScriptManager1" runat="server" EnablePartialRendering="true" />
    
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    	<ContentTemplate>
    
                <div id="MainFields"  runat="server" class="MainFieldsDivStyle" >
                    <table id="PostingInformation" runat="server" width="90%">
                        <tr style="height:30px;" >
                            <td colspan="2">
                            </td>
                            <td width="22%" colspan="2">
                            </td>
                        </tr>
                        <tr>
                    
                            <td align="center" class="ExCellStyle" colspan="2">
                                <asp:Label ID="FromLabel0" runat="server" BorderStyle="None" BorderWidth="0px" ForeColor="Black" Height="38px" style="font-size: 32px; margin-right: 5px; font-family: 'sakkal Majalla'; text-align: center;" Text="مـــــــــــــــــــــن"></asp:Label>
                                </td>
                            <td align="right" class="ExCellStyle" colspan="2">
                                </td>
                
                        </tr>
    
                        <tr>
                            <td align="right" colspan="2">
                                <asp:TextBox ID="SourceTxtBox" runat="server" Height="35px" style="font-family: 'Sakkal Majalla'; font-size: 24px; text-align: right; margin-top: 0px; border-style:solid; border-color:Black; " Width="540px" ReadOnly="True"></asp:TextBox>
                            </td>
                            <td align="right" class="ExCellStyle" colspan="2">
                                &nbsp;</td>
                        </tr>
    
                        <tr style="height:40px; " >
                            <td align="right" colspan="2">
                            </td>
                            <td align="right" colspan="2">
                            </td>
                        </tr>
        
                        <tr>
                            <td align="center" class="CellStyle" colspan="2">
                                <asp:Label ID="ToLabel0" runat="server" BorderStyle="None" BorderWidth="0px" ForeColor="Black" Height="38px" style="font-size: 32px; margin-right:5px; font-family: 'sakkal Majalla'; text-align: center;" Text="إلــــــــــــــــــــى" BorderColor="Black"></asp:Label>
                            </td>
                            <td align="right" class="CellStyle" colspan="2"></td>
                        </tr>
        
                        <tr>
                            <td align="right" colspan="2">
                                <asp:TextBox ID="TargetTxtBox" runat="server" Height="35px" style="font-family: 'Sakkal Majalla'; font-size: 24px; text-align: right; margin-top: 0px; border-style:solid; border-color:Black; " Width="540px" ReadOnly="True"></asp:TextBox>
                            </td>
                            <td align="right" class="CellStyle" colspan="2">
                                &nbsp;</td>
                        </tr>
        
                        <tr style="height:40px; " >
                            <td align="right" colspan="2" >
                                </td>
                            <td align="right" colspan="2">
                                </td>
                        </tr>
    
                        <tr>
                            <td align="center" class="HeaderLetterCellStyle" colspan="2">
                                <asp:Label ID="LetterHeadLabel" runat="server" BorderStyle="None" BorderWidth="0px" ForeColor="Black" Height="35px" style="font-size: 34px; margin-right:5px; font-family: 'sakkal Majalla'; text-align: center;" Text="الرســـالة" Width="93px"></asp:Label>
                            </td>
                            <td align="right" class="HeaderLetterCellStyle" colspan="2"></td>
                        </tr>
                        <tr>
                            <td align="right" colspan="2">
                                <asp:TextBox ID="LetterIDTxtBox" runat="server" Height="35px" style="font-family: 'Sakkal Majalla'; font-size: 24px; text-align: right; margin-top: 0px; border-style:solid; border-color:Black; " Width="540px" ReadOnly="True"></asp:TextBox>
                            </td>
                            <td align="right" class="HeaderLetterCellStyle" colspan="2">
                                <asp:Label ID="LetterIDLabel" runat="server" BorderColor="Black" BorderStyle="None" BorderWidth="0px" ForeColor="Black" Height="30px" style="font-size: 26px; margin-right:5px;  font-family: 'Sakkal Majalla'; text-align: right;" Text="مرجع المراسلة" Width="110px"></asp:Label>
                            </td>
                        </tr>
    
                        <tr>
                            <td align="right" colspan="2">
                        
                                <asp:textbox ID="TimingTxtBox" runat="server" Height="35px" 
                            
                                    style="font-family: 'Sakkal Majalla'; font-size: 24px; text-align: right; margin-top: 0px; border-style:solid; border-color:Black; " 
                                    Width="540px" ReadOnly="True"></asp:textbox>
                            </td>
                            <td align="right" class="HeaderLetterCellStyle" colspan="2">
                                <asp:Label ID="Label1" runat="server" Text="تاريخ المراسلة" 
                                    BorderStyle="None" BorderWidth="0px" ForeColor="Black" Height="30px" 
                            
                                    style="font-size: 26px; margin-right:5px;  font-family: 'Sakkal Majalla'; text-align: right;" 
                                    BorderColor="Black" Width="110px" 
                                    ></asp:Label>
                            </td>
                        </tr>
    
                
                        <tr>
                            <td align="right" colspan="2">
                        
                                <asp:textbox ID="SubjectTxtBox" runat="server" Height="35px"
                            
                                    style="font-family: 'Sakkal Majalla'; font-size: 24px; text-align: right; margin-top: 0px; border-style:solid; border-color:Black; " 
                                    Width="540px" ReadOnly="True"></asp:textbox>
                            </td>
                            <td align="right" class="HeaderLetterCellStyle" colspan="2">
                                <asp:Label ID="SubjectLabel" runat="server" Text="الموضــوع" 
                                BorderStyle="None" BorderWidth="0px" ForeColor="Black" Height="35px" 
                                style="font-size: 26px; margin-right:5px;  font-family: 'Sakkal Majalla'; text-align: right;" 
                                    BorderColor="Black" Width="110px" 
                                ></asp:Label>
                            </td>
                        </tr>
    
    
                        <tr id="CommentsRow" runat="server"  >
                            <td align="right" colspan="2">
                                <asp:TextBox ID="CommentsTxtBox" runat="server" TextMode="MultiLine" Height="100px"
                                Width="540px" BorderColor="Black" BorderStyle="Solid" Style="font-size: 22px;
                                font-family: 'Sakkal Majalla'; text-align: right;" MaxLength="400" 
                                    onkeyup="textCounter(this,400);" ReadOnly="True"></asp:TextBox>
                            </td>
                            <td align="right" class="HeaderLetterCellStyle" colspan="2">
                                <asp:Label ID="CommentsLabel" runat="server" Text="الملاحظات" 
                                BorderStyle="None" BorderWidth="0px" ForeColor="Black" Height="35px" 
                                style="font-size: 26px; margin-right:5px;  font-family: 'Sakkal Majalla'; text-align: right;" 
                                    BorderColor="Black" Width="110px" 
                                ></asp:Label>
                            </td>
                        </tr>
    
                        <tr>
                            <td style="text-align: left" colspan="2">
                                <asp:TextBox ID="DeadLineTxtBox" runat="server" Height="40px" ReadOnly="True" style="font-family: 'Sakkal Majalla'; font-size: 22px; text-align: right; margin-top: 2px; border-style:solid; border-color:Black; " Width="540px"></asp:TextBox>
                            </td>
                            
                            <td align="right" class="HeaderLetterCellStyle" colspan="2">
                                <asp:Label ID="DeadLineLabel" runat="server" Text="الموعد النهائي" 
                                BorderStyle="None" BorderWidth="0px" ForeColor="Black" Height="35px" 
                        
                                    style="font-size: 26px; margin-right:5px;  font-family: 'Sakkal Majalla'; text-align: right;" Width="110px" 
                                ></asp:Label>
                            </td>
                        </tr>
    
                        <tr id="ImportanceRow" runat="server" >
                            <td style="text-align: right" colspan="2">
                        
                                <asp:Image ID="HighImportant" runat="server" Width="50px" Height="40px"  
                                    ImageUrl="~/Images/HighImportance.jpg" BorderColor="Black" 
                                    BorderStyle="none" BorderWidth="0px" 
                                    style="margin-left: 0px; margin-right:1px; " />
                        
                            </td>
                            <td align="right" class="HeaderLetterCellStyle" colspan="2">
                                <asp:Label ID="ImportanceLabel" runat="server" Text="الأهمية" 
                                BorderStyle="None" BorderWidth="0px" ForeColor="Black" Height="35px" 
                                style="font-size: 26px; margin-right:5px;  font-family: 'Sakkal Majalla'; text-align: right;" Width="110px" 
                                ></asp:Label>
                            </td>
                        </tr>
                            
    
                        <tr>
                            <td style="text-align: right" colspan="2" > 
                                <asp:textbox ID="ProcessingStatusTxtBox" runat="server" Height="40px"
                                style="font-family: 'Sakkal Majalla'; font-size: 24px; text-align: right; margin-top: 0px; border-style:solid; border-color:Black; " 
                                Width="540px" ReadOnly="True"></asp:textbox>
                            </td>
                            <td align="right" class="HeaderLetterCellStyle" colspan="2">
                                <asp:Label ID="ProcessingStatusLabel" runat="server" Text="الحالة" 
                                BorderStyle="None" BorderWidth="0px" ForeColor="Black" Height="35px" 
                        
                                    style="font-size: 26px; margin-right:5px;  font-family: 'Sakkal Majalla'; text-align: right;" Width="110px" 
                                ></asp:Label>
                            </td>
                        </tr>
    
                        <tr id="AttachmentRow" runat="server" >
    
                            <td align="right" style="text-align: right" colspan="2">
                        
                                <asp:HyperLink ID="AttachmentLink" runat="server"  Target="_blank" ImageUrl="~/Images/Attachment1.png"  CssClass="HyperLinkStyle"> </asp:HyperLink>
                        
                                <br />
                      
                            </td>
                            <td align="right" class="HeaderLetterCellStyle" colspan="2" >
                                <asp:Label ID="AttachmentLabel" runat="server" Text="وثيقة المراسلة" 
                                BorderStyle="None" BorderWidth="0px" ForeColor="Black" Height="35px" 
                                    style="font-size: 26px; margin-right:5px;  font-family: 'Sakkal Majalla'; text-align: right;" Width="110px" 
                                ></asp:Label>
                            </td>
                        </tr>
    
                        <%--<tr id="NewDeadLineRow" runat="server" visible="false">
                            <td class="auto-style1">
                                <asp:Button ID="SendRequest" runat="server" BackColor="#6262FF" CausesValidation="False" ForeColor="White" Height="39px" 
                                onMouseOut="this.className='Buttonout'" onMouseOver="this.className='Buttonhover'" 
                                style="margin-left: 0px;font-size: 30px; font-family: sc_AMEEN;
                                -moz-border-radius: 15px;-webkit-border-radius: 15px;border-radius: 15px;" 
                                Text="أرسل" UseSubmitBehavior="False" Width="130px" />
                            </td>
                            <td align="right">
                                &nbsp;</td>
                            <td style="text-align: right">
                                &nbsp;</td>
                            
                            <td align="right" class="HeaderLetterCellStyle">
                                <asp:Label ID="Label2" runat="server" Text="الموعد المطلوب" 
                                BorderStyle="None" BorderWidth="0px" ForeColor="Black" Height="35px" 
                        
                                    style="font-size: 26px; margin-right:5px;  font-family: 'Sakkal Majalla'; text-align: right;" Width="110px" 
                                ></asp:Label>
                            </td>
                        </tr>
    
                        <tr id="ClosingRec" runat="server" visible="false" align="left" >
                            <td colspan="4" style="border:solid black 1px;background-color:lightblue;">
                                <asp:ImageButton ID="CloseRequestRecords" runat="server" Height="15px" ImageUrl="~/Images/NewClose.png" Width="18px" CausesValidation="False" />
                            </td>
                        </tr> 
    
                        <tr id="RequestSentMsgRecord" runat="server" visible="false">
                            <td colspan="4" style="border:solid black 1px;background-color:lightblue;" align="center" class="auto-style4">
                             <asp:Label ID="MessageSentLabel" runat="server" Text="تم إرسال طلب التمديد" CssClass="auto-style3"></asp:Label>
                            </td>
                        </tr> 
                        
                        <tr id="ShowRequestsBtnRec" runat="server" >
                            <td colspan="4" style="border:solid black 1px;background-color:lightblue;" align="center" class="auto-style4">
                                <asp:Button ID="ShowRequestRecords" runat="server" BackColor="#6262FF" CausesValidation="False" ForeColor="White" Height="39px" onMouseOut="this.className='Buttonout'" onMouseOver="this.className='Buttonhover'" style="margin-left: 0px;font-size: 30px; font-family: sc_AMEEN;
                                -moz-border-radius: 15px;-webkit-border-radius: 15px;border-radius: 15px;" Text="عرض سجل الطلبات" UseSubmitBehavior="False" Width="155px" />
                            </td>
                        </tr> --%>
    
                        <tr id="ExtendingRow1" runat="server" >
                            <td class="CommentsHeaderStyle" colspan="4">
                               سجل طلبات التمديد</td>
                        </tr>      
                
                        <tr align="center" id="ExtendingRow2" runat="server" >
                            <td colspan="4">
                                <asp:GridView ID="GridView2" runat="server" DataSourceID="SDS2" CssClass="Grid"    
                                CellPadding="4" ForeColor="#333333" GridLines="Vertical" BackColor="#99CCFF" 
                                BorderStyle="Solid" AutoGenerateColumns="False" Width="100%"  
                                EmptyDataText="لا توجد أي طلبات تمديد" AllowSorting="True"  BorderColor="Black" BorderWidth="2px" Height="219px"  >
                                <Columns>
    
                                    
    
                                    <asp:TemplateField HeaderText="التاريخ" >
                                        <ItemTemplate>
                                            <asp:Label ID="CommentTimeField" runat="server" text='<%# (Eval("CommentTime")).toshortdatestring() %>'   />  
                                        </ItemTemplate>
                                        <ItemStyle BorderWidth="1px" Width="15%" HorizontalAlign="right" Font-Size="15px"  Font-Names="Courier New"/>
                                    </asp:TemplateField>
    
                                    <asp:TemplateField HeaderText="الملاحظة"  >
                                        <ItemTemplate>
                                            <asp:Label ID="CommentField" runat="server" text='<%# Eval("Comment")  %>'    />  
                                        </ItemTemplate>
                                        <ItemStyle BorderWidth="1px" Width="40%" HorizontalAlign="right" Font-Size="20px" Font-Names="sakkal Majalla" />
                                    </asp:TemplateField>
    
                                    <asp:TemplateField>
                                        <HeaderStyle Height="20px" /> 
                                        <ItemTemplate>
                                            <asp:RadioButton ID="GridView1_RadioButton" runat="server"  AutoPostBack="True" GroupName="RadioGroup" OnCheckedChanged="GridView1_RadioButton_CheckedChanged" />
                                        </ItemTemplate> 
                                        <ItemStyle BorderWidth="1px" Width="2%" /> 
                                    </asp:TemplateField>
                            
                                    <asp:TemplateField Visible="false" >
                                        <ItemTemplate>
                                            <asp:Label ID="CommentatorID" runat="server" text='<%# Eval("Commentator")%>'  Visible="false" />  
                                        </ItemTemplate>
                                    </asp:TemplateField>
    
                                    <asp:TemplateField Visible="false" >
                                        <ItemTemplate>
                                            <asp:Label ID="CmtTime" runat="server" text='<%# Eval("CommentTime")%>'  Visible="false" />  
                                        </ItemTemplate>
                                    </asp:TemplateField>
    
                                    <asp:TemplateField Visible="false" >
                                        <ItemTemplate>
                                            <asp:Label ID="ByUserIndx" runat="server" text='<%# Eval("ByUserIndx")%>'  Visible="false" />  
                                        </ItemTemplate>
                                    </asp:TemplateField>
    
                            
                                </Columns> 
                        
                                <EditRowStyle BackColor="#999999" />
                                <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                                <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" BorderColor="Black" BorderStyle="Solid" BorderWidth="2px" Font-Size="22px" Font-Names="Sakkal Majalla"    />
                                <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
                                <RowStyle BackColor="#F7F6F3" ForeColor="#333333" BorderColor="Black" BorderStyle="Outset" BorderWidth="2px" />
                                <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
                                <SortedAscendingCellStyle BackColor="#E9E7E2" />
                                <SortedAscendingHeaderStyle BackColor="#506C8C" />
                                <SortedDescendingCellStyle BackColor="#FFFDF8" />
                                <SortedDescendingHeaderStyle BackColor="#6F8DAE" />
                                <EmptyDataRowStyle Font-Names="Sakkal Majalla" Font-Size="26px" HorizontalAlign="Center" Width="100%" />
                                <EmptyDataTemplate>
                                    <div>
                                        لا توجد أي طلبات تمديد
                                    </div> 
                                </EmptyDataTemplate>
                        
                
    
                            </asp:GridView>
                            </td>
                        </tr>
    
                        <tr id="Tr1" runat="server" style="height:60px;" align="center"  >
                            <td width="630px" colspan="4" style="border-top: 1px none Black;border-left: 1px none Black;border-right: 1px none Black; " >
                                <asp:ImageButton ID="ExtendDeadline" runat="server" BorderStyle="None" BorderWidth="0px" CssClass="CommentButton" Height="50px" ImageUrl="~/Images/AddComment.png" ToolTip="إضافة تعليق" Width="52px" />
                            </td>
                        </tr> 
    
                        <tr>
                            <td colspan="4">
                            </td>
                        </tr>
    
                        
                
                        <tr>
                            <td class="CommentsHeaderStyle" colspan="4">
                                التعليقات</td>
                        </tr>      
                
                        <tr align="center">
                            <td colspan="4">
                                <asp:GridView ID="GridView1" runat="server" DataSourceID="SDS2" CssClass="Grid"    
                                CellPadding="4" ForeColor="#333333" GridLines="Vertical" BackColor="#99CCFF" 
                                BorderStyle="Solid" AutoGenerateColumns="False"  
                                EmptyDataText="لا توجد أي سجلات" AllowSorting="True"  BorderColor="Black" BorderWidth="2px"  >
                                <Columns>
    
                                    <asp:TemplateField HeaderText="بواسطة" >
                                        <ItemTemplate>
                                            <asp:Label ID="CommentatorName" runat="server" />  
                                        </ItemTemplate>
                                        <ItemStyle BorderWidth="1px" Width="45%" HorizontalAlign="right" Font-Size="20px" Font-Names="sakkal Majalla"/>
                                    </asp:TemplateField>
    
                                    <asp:TemplateField HeaderText="التاريخ" >
                                        <ItemTemplate>
                                            <asp:Label ID="CommentTimeField" runat="server" text='<%# (Eval("CommentTime")).toshortdatestring() %>'   />  
                                        </ItemTemplate>
                                        <ItemStyle BorderWidth="1px" Width="15%" HorizontalAlign="right" Font-Size="15px"  Font-Names="Courier New"/>
                                    </asp:TemplateField>
    
                                    <asp:TemplateField HeaderText="الملاحظة"  >
                                        <ItemTemplate>
                                            <asp:Label ID="CommentField" runat="server" text='<%# Eval("Comment")  %>'    />  
                                        </ItemTemplate>
                                        <ItemStyle BorderWidth="1px" Width="40%" HorizontalAlign="right" Font-Size="20px" Font-Names="sakkal Majalla" />
                                    </asp:TemplateField>
    
                                    <asp:TemplateField>
                                        <HeaderStyle Height="20px" /> 
                                        <ItemTemplate>
                                            <asp:RadioButton ID="GridView1_RadioButton" runat="server"  AutoPostBack="True" GroupName="RadioGroup" OnCheckedChanged="GridView1_RadioButton_CheckedChanged" />
                                        </ItemTemplate> 
                                        <ItemStyle BorderWidth="1px" Width="2%" /> 
                                    </asp:TemplateField>
                            
                                    <asp:TemplateField Visible="false" >
                                        <ItemTemplate>
                                            <asp:Label ID="CommentatorID" runat="server" text='<%# Eval("Commentator")%>'  Visible="false" />  
                                        </ItemTemplate>
                                    </asp:TemplateField>
    
                                    <asp:TemplateField Visible="false" >
                                        <ItemTemplate>
                                            <asp:Label ID="CmtTime" runat="server" text='<%# Eval("CommentTime")%>'  Visible="false" />  
                                        </ItemTemplate>
                                    </asp:TemplateField>
    
                                    <asp:TemplateField Visible="false" >
                                        <ItemTemplate>
                                            <asp:Label ID="ByUserIndx" runat="server" text='<%# Eval("ByUserIndx")%>'  Visible="false" />  
                                        </ItemTemplate>
                                    </asp:TemplateField>
    
                            
                                </Columns> 
                        
                                <EditRowStyle BackColor="#999999" />
                                <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                                <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" BorderColor="Black" BorderStyle="Solid" BorderWidth="2px" Font-Size="22px" Font-Names="Sakkal Majalla"    />
                                <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
                                <RowStyle BackColor="#F7F6F3" ForeColor="#333333" BorderColor="Black" BorderStyle="Outset" BorderWidth="2px" />
                                <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
                                <SortedAscendingCellStyle BackColor="#E9E7E2" />
                                <SortedAscendingHeaderStyle BackColor="#506C8C" />
                                <SortedDescendingCellStyle BackColor="#FFFDF8" />
                                <SortedDescendingHeaderStyle BackColor="#6F8DAE" />
                                <EmptyDataRowStyle Font-Names="Sakkal Majalla" Font-Size="26px" HorizontalAlign="Center" />
                                <EmptyDataTemplate>
                                    <div>
                                        لا توجد أي ملاحظات
                                    </div> 
                                </EmptyDataTemplate>
                        
                
    
                            </asp:GridView>
                            </td>
                        </tr>
                        <tr align="center" >
                            <td width="630px" colspan="4" style="border-top: 1px none Black;border-left: 1px none Black;border-right: 1px none Black; " >
                                <asp:ImageButton ID="DeleteComment" runat="server" Width="50px" CssClass="CommentButton" ImageUrl="~/Images/DeleteComment.png" ToolTip="حذف التعليق"  />
                                <asp:ImageButton ID="AddComment" runat="server" BorderStyle="None" BorderWidth="0px" CssClass="CommentButton" Height="50px" ImageUrl="~/Images/AddComment.png" ToolTip="إضافة تعليق" Width="52px" />
                                <asp:TextBox ID="RemarksTextBox" runat="server" BorderColor="Black" BorderStyle="Solid" Height="58px" 
                                    style="resize:none;margin-top: 5px; margin-left: 9px; text-align: right; font-size: 24px;
                                -moz-border-radius: 15px;-webkit-border-radius: 15px;border-radius: 15px;" 
                                TextMode="MultiLine" Width="350px" Font-Names="Sakkal Majalla" Font-Size="20px"></asp:TextBox>
                            </td>
    
                        </tr>
                        <tr id="RemarkerHolder" runat="server"  >
                            <td colspan="4" style="border-bottom : 1px none Black;border-right : 1px none Black;border-left : 1px none Black; text-align: right;">
                                <asp:DropDownList ID="RemarkerDD" runat="server" 
                                    style="text-align: right; margin-top: 5px; margin-right:10px;  font-size: 22px; font-family: 'Sakkal Majalla';
                                    -moz-border-radius: 15px;-webkit-border-radius: 15px;border-radius: 15px;" Width="288px" DataSourceID="SDS1" DataTextField="UnitName" DataValueField="UnitIndx" AutoPostBack="True" Visible="False"
                                    onMouseOver="this.className='Buttonhover'" onMouseOut="this.className='Buttonout'">
                                </asp:DropDownList>
                                <asp:Label ID="RemarkerLabel" runat="server" Text="بواسطة" style=" margin-bottom:5px;margin-right:10px;margin-left:5px;     font-size: 20px; font-family: 'Sakkal Majalla'; font-weight: 700;" Height="33px" Width="50px" Visible="False"></asp:Label>
                            </td>
                        </tr>
    
                
    
                <tr>
                    <td align="left" colspan="2" >
                        <asp:ImageButton ID="CloseThisPage" runat="server" CausesValidation="False" CssClass="ImgBtnStyle" Height="40px" ImageUrl="~/Images/CloseThisPage.png" Width="50px" />
                    </td>
                </tr>
    
                
            </table>
                </div> 
        
        </ContentTemplate> 
        </asp:UpdatePanel> 
    
        
    
        <div id="ExtraItems" runat="server" visible="false" >
            <table id="TmpTable" runat="server">   
                <tr>
                    <td>
                        <asp:SqlDataSource ID="SDS1" runat="server" 
                        ConnectionString="<%$ ConnectionStrings:TrackingConnectionString %>" 
                        SelectCommand="SELECT DISTINCT UserAuthorizedUnits.UnitIndx, UserAuthorizedUnits.UnitName FROM UserAuthorizedUnits INNER JOIN PendingCommentsRemarkerHeadsUnitsList ON UserAuthorizedUnits.LoadedByUserName = PendingCommentsRemarkerHeadsUnitsList.LoadedByUserName AND UserAuthorizedUnits.UnitIndx = PendingCommentsRemarkerHeadsUnitsList.Indx WHERE (UserAuthorizedUnits.LoadedByUserName = @LoadedByUserName)">
                            <SelectParameters>
                                <asp:SessionParameter Name="LoadedByUserName" SessionField="username" Type="String" />
                            </SelectParameters>
                        </asp:SqlDataSource>
                    </td> 
                </tr>
                <tr>
                    <td>
                        <asp:SqlDataSource ID="SDS2" runat="server" 
                        ConnectionString="<%$ ConnectionStrings:TrackingConnectionString %>" 
                        SelectCommand="SELECT DISTINCT [Comment], [CommentTime], [Commentator],[ByUserIndx] FROM [SupervisionComments] WHERE ([LetterID] = @LetterID) ORDER BY CommentTime DESC">
                            <SelectParameters>
                                <asp:SessionParameter Name="LetterID" SessionField="pendingletterid" Type="String" />
                            </SelectParameters>
                        </asp:SqlDataSource>
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:SqlDataSource ID="SDS3" runat="server" 
                        ConnectionString="<%$ ConnectionStrings:TrackingConnectionString %>" 
                        SelectCommand="SELECT DISTINCT [RequestID],[LetterID],[RequestingTime] FROM [ExtendingAnsweringDateRequests] WHERE ([LetterID] = @LetterID) ORDER BY RequestingTime">
                            <SelectParameters>
                                <asp:SessionParameter Name="LetterID" SessionField="pendingletterid" Type="String" />
                            </SelectParameters>
                        </asp:SqlDataSource>
                    </td>
                </tr>
            </table>
            
         </div>          
            
    </asp:Content>
    
    

    The part I want to show when clicking the ExtendDeadLine button is as following:

    <div id="PopUpDive" runat="server" class="MainFieldsDivStyle">
                <table width="100%">
                    <tr>
                        <td style="width:75%" class="auto-style6">
                            <asp:TextBox ID="PopUpDeadLineTxtBox" runat="server" Height="40px" ReadOnly="True" style="font-family: 'Sakkal Majalla'; font-size: 22px; text-align: right; margin-top: 2px; border-style:solid; border-color:Black; " Width="400px"></asp:TextBox>
                        </td>
                        <td align="right" class="HeaderLetterCellStyle">
                            <asp:Label ID="DeadLineLabel0" runat="server" BorderStyle="None" BorderWidth="0px" ForeColor="Black" Height="35px" style="font-size: 26px; margin-right:5px;  font-family: 'Sakkal Majalla'; text-align: right;" Text="الموعد النهائي" Width="110px"></asp:Label>
                        </td>
                    </tr>
                    <tr>
                        <td style="width:75%" class="auto-style6">
                            <asp:TextBox ID="NewPopupDeadLineTxtbox" runat="server" Height="40px" ReadOnly="True" style="font-family: 'Sakkal Majalla'; font-size: 22px; text-align: right; margin-top: 2px; border-style:solid; border-color:Black; " Width="400px"></asp:TextBox>
                        </td>
                        <td align="right" class="HeaderLetterCellStyle">
                            <asp:Label ID="Label2" runat="server" BorderStyle="None" BorderWidth="0px" ForeColor="Black" Height="35px" style="font-size: 26px; margin-right:5px;  font-family: 'Sakkal Majalla'; text-align: right;" Text="الموعد النهائي الجديد" Width="160px"></asp:Label>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center">
    
                            <asp:Button ID="GoBtn" runat="server" BackColor="#6262FF"  
                            ForeColor="White" Height="40px" 
                            style="text-align: center; font-size: 28px; margin-top: 15px; margin-bottom: 5px; font-family: sc_AMEEN; margin-left: 0px;
                            -moz-border-radius: 15px;-webkit-border-radius: 15px;border-radius: 15px;margin-top:10px;margin-bottom:10px;" 
                            Text="استمرار" Width="167px"
                            onMouseOver="this.className='Buttonhover'" onMouseOut="this.className='Buttonout'" />
    
                        </td>
                    </tr>
                </table>
            </div>

    When clicking the GoBtn button, I want to close the popup window

    Please help me

    Friday, August 24, 2018 9:21 AM

All replies

  • User283571144 posted

    Hi alihusain_77,

    According to your description, I suggest you could consider using ajax toolkit model popup extender.

    It could easily bind the model popup as you wished.

    More details about how to install the ajaxtoolkit, you could refer to below article:

    https://github.com/DevExpress/AjaxControlToolkit/wiki/Step-by-Step-Installation-Guide 

    More details, you could refer to below codes:

    Notice:I just add binding of the model popup with the image button not copy all your codes.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Addmodapopupwindowwhenclickingthebutton.aspx.cs" Inherits="AspNetNormalIssue.Webform.Addmodapopupwindowwhenclickingthebutton" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <asp:ImageButton ID="ExtendDeadline" runat="server" BorderStyle="None" BorderWidth="0px" CssClass="CommentButton" Height="50px" ImageUrl="~/Images/AddComment.png" ToolTip="إضافة تعليق" Width="52px" />
                        <ajaxToolkit:ModalPopupExtender ID="MPE" runat="server"
                            TargetControlID="ExtendDeadline"
                            PopupControlID="PopUpDive"
                            BackgroundCssClass="modalBackground"
                            DropShadow="true"
                            CancelControlID="GoBtn" />
                    </ContentTemplate>
                </asp:UpdatePanel>
    
                <div id="PopUpDive" runat="server" class="MainFieldsDivStyle">
                    <table width="100%">
                        <tr>
                            <td style="width: 75%" class="auto-style6">
                                <asp:TextBox ID="PopUpDeadLineTxtBox" runat="server" Height="40px" ReadOnly="True" Style="font-family: 'Sakkal Majalla'; font-size: 22px; text-align: right; margin-top: 2px; border-style: solid; border-color: Black;" Width="400px"></asp:TextBox>
                            </td>
                            <td align="right" class="HeaderLetterCellStyle">
                                <asp:Label ID="DeadLineLabel0" runat="server" BorderStyle="None" BorderWidth="0px" ForeColor="Black" Height="35px" Style="font-size: 26px; margin-right: 5px; font-family: 'Sakkal Majalla'; text-align: right;" Text="الموعد النهائي" Width="110px"></asp:Label>
                            </td>
                        </tr>
                        <tr>
                            <td style="width: 75%" class="auto-style6">
                                <asp:TextBox ID="NewPopupDeadLineTxtbox" runat="server" Height="40px" ReadOnly="True" Style="font-family: 'Sakkal Majalla'; font-size: 22px; text-align: right; margin-top: 2px; border-style: solid; border-color: Black;" Width="400px"></asp:TextBox>
                            </td>
                            <td align="right" class="HeaderLetterCellStyle">
                                <asp:Label ID="Label2" runat="server" BorderStyle="None" BorderWidth="0px" ForeColor="Black" Height="35px" Style="font-size: 26px; margin-right: 5px; font-family: 'Sakkal Majalla'; text-align: right;" Text="الموعد النهائي الجديد" Width="160px"></asp:Label>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" align="center">
    
                                <asp:Button ID="GoBtn" runat="server" BackColor="#6262FF"
                                    ForeColor="White" Height="40px"
                                    Style="text-align: center; font-size: 28px; margin-top: 15px; margin-bottom: 5px; font-family: sc_AMEEN; margin-left: 0px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin-top: 10px; margin-bottom: 10px;"
                                    Text="استمرار" Width="167px"
                                    onMouseOver="this.className='Buttonhover'" onMouseOut="this.className='Buttonout'" />
    
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </form>
    </body>
    </html>
    

    Result:

    Best Regards,

    Brando

    Monday, August 27, 2018 8:48 AM
  • User1204533129 posted

    try go with light weighted Bootstrap Modal popUp.

    https://www.w3schools.com/Bootstrap/bootstrap_modal.asp

    best regards, 

    kamal.

    Thursday, October 4, 2018 7:16 PM