popup window doesnt work

Question

i need to make popup window to edit rows in my gridview tjere are many examples all of thems works fine the window it desnt popup this is my code this page is inheted from master page 

 

 

<%@ Page Title="" Language="C#" MasterPageFile="~/Admin/AdminMasterPage.master" AutoEventWireup="true" CodeFile="Articaledit.aspx.cs" Inherits="Admin_Articaledite" %>

 

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

 

    <script type="text/javascript">

        $(document).ready(function () {

            $('a#popup').live('click', function (e) {

 

                var page = $(this).attr("href")

 

                var $dialog = $('<div></div>')

                .html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"></iframe>')

                .dialog({

                    autoOpen: false,

                    modal: true,

                    height: 450,

                    width: 'auto',

                    title: "Edit Artical",

                    buttons: {

                        "Close": function () { $dialog.dialog('close'); }

                    },

                    close: function (event, ui) {

 

                        __doPostBack('<%= btnRefresh.ClientID %>', '');

                    }

                });

                $dialog.dialog('open');

                e.preventDefault();

            });

        });

    </script>

 

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

 

     <div id="DivContent">

 

     <aside class="right-side">

                <!-- Content Header (Page header) -->

       

                <section class="content-header">

                    <h1>

                        Main Slider

                        <small>Artical edit</small>

                    </h1>

 

                    <form id="form1" runat="server">

 

    <h1>Edit Artical</h1>

    <div>

        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true">

        </asp:ScriptManager>

         <asp:UpdateProgress ID="UpdateProgress1" runat="server">

        <ProgressTemplate>

        <img src="Loading.gif" alt="" />

        </ProgressTemplate>

        </asp:UpdateProgress>

 

           

        <asp:DropDownList ID="ddlatrical" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlatrical_SelectedIndexChanged" >

                            <asp:ListItem Value="1">Arabic</asp:ListItem>

                            <asp:ListItem Value="2">English</asp:ListItem>

                        </asp:DropDownList>

 

                        <br />

                         <br />

           

 

 

    <asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Conditional" >

   <ContentTemplate>

      

 

<asp:GridView ID="GridView1" runat="server" Width = "900px"

AutoGenerateColumns = "False" Font-Names = "Arial"

Font-Size = "11pt" AlternatingRowStyle-BackColor = "#367fa9"

HeaderStyle-BackColor = "#99ccff" AllowPaging ="True"

OnPageIndexChanging = "OnPaging"

 CellPadding="6" ForeColor="#333333" GridLines="None" >

<Columns>

 

 

    <%-- row pdf_name --%>

<asp:TemplateField ItemStyle-Width = "200px" HeaderText = "Artical title">

    <ItemTemplate>

        <asp:Label ID="lblBookName" runat="server" class="text-center"

                Text='<%# Eval("Ar_Wtitle")%>'></asp:Label>

    </ItemTemplate>

    <EditItemTemplate>

        <asp:TextBox ID="txtBookName" runat="server"

            Text='<%# Eval("Ar_Wtitle")%>'></asp:TextBox>

    </EditItemTemplate>

  

    <ItemStyle Width="200px" />

</asp:TemplateField>

     <%-- row pdf_name --%>

 

 

     <%-- row pdf_date --%>

    <asp:TemplateField ItemStyle-Width = "200px" HeaderText = "Read More">

    <ItemTemplate>

        <asp:Label ID="lblbookdate" runat="server"

            Text='<%# Eval("WReadMore")%>'></asp:Label>

    </ItemTemplate>

    <EditItemTemplate>

        <asp:TextBox ID="txtbookdate" runat="server"

            Text='<%# Eval("WReadMore")%>'></asp:TextBox>

    </EditItemTemplate>

  

    <ItemStyle Width="200px" />

</asp:TemplateField>

 

       <asp:TemplateField HeaderText="ID">

           <ItemTemplate >

               <a id="popup" href='EditArtical.aspx?id=<%# Eval("id") %>' >edit</a>

           </ItemTemplate>

           </asp:TemplateField>

 

 

 

     <%-- row pdf_date --%>

      <asp:TemplateField>

    <ItemTemplate>

        <asp:LinkButton ID="lnkRemove" runat="server"

            CommandArgument = '<%# Eval("id")%>'

         OnClientClick = "return confirm('Do you want to delete?')"

        Text = "Delete" OnClick = "Deletepdfbook"></asp:LinkButton>

    </ItemTemplate>

  

</asp:TemplateField>

 

 

</Columns>

<AlternatingRowStyle BackColor="White" />

    <EditRowStyle BackColor="#2461BF" />

    <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />

    <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />

    <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />

    <RowStyle BackColor="#EFF3FB" />

    <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />

    <SortedAscendingCellStyle BackColor="#F5F7FB" />

    <SortedAscendingHeaderStyle BackColor="#6D95E1" />

    <SortedDescendingCellStyle BackColor="#E9EBEF" />

    <SortedDescendingHeaderStyle BackColor="#4870BE" />

</asp:GridView>

 

           <asp:Button ID="btnRefresh" Text="refresh" runat="server" style="display:none"

            onclick="btnRefresh_Click" />

   </ContentTemplate>

   <Triggers>

       <asp:AsyncPostBackTrigger ControlID="btnRefresh" EventName="Click" />

   </Triggers>

 </asp:UpdatePanel>

    </div>

    </form>

                        </section>

           

                <!-- Main content -->

                <!-- /.content -->

            </aside>

 

           </div>

   

</asp:Content>

and this is my master page head 

 

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="AdminMasterPage.master.cs" Inherits="Admin_AdminMasterPage" %>

<!DOCTYPE html>

<html>

    <head runat="server">

        <meta charset="UTF-8">

        <title>Admin|Dashboard</title>

        <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>

        <!-- bootstrap 3.0.2 -->

        <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />

        <!-- font Awesome -->

        <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" />

        <!-- Ionicons -->

        <link href="css/ionicons.min.css" rel="stylesheet" type="text/css" />

        <!-- Morris chart -->

        <link href="css/morris/morris.css" rel="stylesheet" type="text/css" />

        <!-- jvectormap -->

        <link href="css/jvectormap/jquery-jvectormap-1.2.2.css" rel="stylesheet" type="text/css" />

        <!-- fullCalendar -->

        <link href="css/fullcalendar/fullcalendar.css" rel="stylesheet" type="text/css" />

        <!-- Daterange picker -->

        <link href="css/daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css" />

        <!-- bootstrap wysihtml5 - text editor -->

        <link href="css/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css" rel="stylesheet" type="text/css" />

        <!-- Theme style -->

        <link href="css/AdminLTE.css" rel="stylesheet" type="text/css" />

        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->

        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

        <!--[if lt IE 9]>

          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

          <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>

        <![endif]-->

        <script type="text/javascript" src="ckeditor/ckeditor.js"></script>

         <script src="http://code.jquery.com/jquery-1.8.2.js"></script>

         <script src="Scripts/jquery.MultiFile.js" type="text/javascript"></script>

                           

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.6/jquery-ui.min.js"></script>

    <link type="text/css" rel="Stylesheet" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.6/themes/smoothness/jquery-ui.css">

        <asp:ContentPlaceHolder id="head" runat="server">

    </asp:ContentPlaceHolder>

    </head>

 

 what  is the best soulation  for that problem ??