How to make popup dragable?

See more:

ASP.NET4

Hi guys!

I have a grid view. Inside of it is an EDIT command. If the user selects that command, a popup will display. I am required to make it drag able whenever/ wherever the user wants to place it. I searched on the net and find one. First, I tried the codes itself and it works fine. But when I combined it with my codes, it does not working. Please someone help me :)

Here is my codes:

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<link rel="stylesheet" type="text/css" href="Style/loginstyle.css" />
 
<meta charset="utf-8"/>
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"/>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css"/>
<script>
$(function () {
$("#dialog").dialog();
});
</script>
 
<style type="text/css">
//My code for designing...
</style>
 
</asp:Content>

<%-- edit milestone popup --%>

<asp:LinkButton Text="" ID="lnkFake" runat="server" />
<cc1:ModalPopupExtender ID="milestone_popup"  runat="server" PopupControlID="milestonepnlPopup" TargetControlID="lnkFake"
CancelControlID="btnClosemilestone" BackgroundCssClass="milestonemodalBackground">
</cc1:ModalPopupExtender>
<asp:Panel ID="milestonepnlPopup" runat="server" CssClass="milestone_modalPopup" Style="display: none">
<div class="header" id="dialog">
Edit Milestone
</div>
<div class="body">
<table border="0" style="text-align: center" align="left">
<tr>
<td>
<table>
<tr>
<td>
<asp:Label ID="Label10" runat="server" Text="Milestone Code:"></asp:Label>
</td>
<td>
<asp:TextBox ID="lblmilestone_popup_code" runat="server"></asp:TextBox>
<%--<asp:Label ID="lblmilestone_popup_code" runat="server" Text=""></asp:Label>--%>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label11" runat="server" Text="Order Number:"></asp:Label>
</td>
<td>
<asp:TextBox ID="lblmilestone_popup_orderno" runat="server"></asp:TextBox>
<%-- <asp:Label ID="lblmilestone_popup_orderno" runat="server" Text="Label"></asp:Label>--%>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label9" runat="server" Text="Milestone Name:"></asp:Label>
</td>
<td>
<asp:Label ID="lblmilestonename_popup_name" runat="server" Text="" Font-Bold="true"></asp:Label>
</td>
</tr>
<tr>
<td style="vertical-align:top">
<asp:Label ID="lblmilestone_status" runat="server"></asp:Label>
</td>
<td style="vertical-align:top">
<asp:RadioButtonList ID="rrd_milestone_status" runat="server">
<asp:ListItem Selected="False" Value="Active">Active</asp:ListItem>
<asp:ListItem Selected="False" Value="Inactive">Inactive</asp:ListItem>
</asp:RadioButtonList>