Can anyone tell me how to show a popup on clicking a link (anchor tag), the popup could allow me to fill the datas from db and also i need anchor element there to redirect to some other page?

hi

u can do this using a an ajax control "ajaxToolkit:ModalPopupExtender"

__________________
.....................................
''''''Rajesh''''''
Ants. . . . . . Like me

Mr Rajesh, i have tried to insert the ajax ToolKit control in my page, but its not working, can you tell me what i have to do?

hi
Sarav..

just check whether u have installed the ajax setup...

__________________
.....................................
''''''Rajesh''''''
Ants. . . . . . Like me

Hi Rajesh, i have installed Ajax setup, can you send me a code example for this?

__________________
J.Saravanan

yes sure. Mr.Saravanan

<asp:ScriptManager ID="ScriptManager1" AsyncPostBackTimeout="36000" runat="server">

<asp:UpdatePanel ID="searchGalleryUpdatePanel" runat="server">
<ContentTemplate>
<div id="searchGalleryDiv" style="visibility: hidden; position: absolute; top: 0px;
width: 150px;" runat="server">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top">
<div style="cursorointer;" onmousedown="initializedrag(event)" onmouseup="stopdrag()">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1%" align="left" valign="top">
<img src="http://www.discussweb.com/images/img_leftbulletin_header.gif" /></td>
<td align="left" valign="middle" background="http://www.discussweb.com/images/bg_header.gif" class="heading1">
Search
</td>
<td width="1%" align="left" valign="top">
<img src="http://www.discussweb.com/images/img_rightbulletin_header.gif" /></td>
<td width="30%" align="center" valign="middle" background="http://www.discussweb.com/images/bg_panel_header.gif">
<a class="txttoplink" name="bannedReasonClose" id="A1" onmouseover=" window.status='close'; return true"
href="" onclick="javascript:HideSearchGallery(); return false">close </a>
</td>
<td width="1%" align="left" valign="top">
<img src="http://www.discussweb.com/images/img_right_header.gif" /></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td align="left" valign="top" class="panelbor">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="middle" bgcolor="#eff0eb">
<asp:Panel runat="server" DefaultButton="topSearchImageButton" ID="searchPanel">
<table width="100%" border="0" cellspacing="8" cellpadding="0">
<tr>
<td align="left" valign="top">
<aspropDownList ID="searchUploadTypeDropDownList" CssClass="formTextBox" runat="server"
DataValueField="Id" DataTextField="Name" AppendDataBoundItems="true">
</aspropDownList>
</td>
</tr>
<tr>
<td align="left" valign="top">
<asp:TextBox ID="topSearchTextBox" CssClass="formTextBox" MaxLength="20" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td align="left" valign="top">
<asp:ImageButton ID="topSearchImageButton" ImageUrl="http://www.discussweb.com/images/btn_h_search.gif" runat="server"
OnClick="topSearchImageButton_Click" />
</td>
</tr>
</table>
</asp:Panel>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</ContentTemplate>
</asp:UpdatePanel>

</asp:ScriptManager>
<a id="searchGalleryA" class="txttoplink" name="searchGalleryA" href="#" onclick="javascript:ShowSearchGallery('searchGalle ryA'); return false">
Search </a>
JS:-

var dragapproved=false
var ie5=document.all&&document.getElementById
var ns6=document.getElementById&&!document.all
function ShowSearchGallery(aname)
{
browsername = navigator.appName;
var c = getAnchorPosition(aname);
//alert ('X: ' + c.x + ' Y:' + c.y);
document.getElementById('ctl00_searchGalleryDiv'). style.visibility = "visible";
if( browsername == "Netscape")
{
left =(c.x-30);
document.getElementById('ctl00_searchGalleryDiv'). style.left = left+"px";
document.getElementById('ctl00_searchGalleryDiv'). style.top = (c.y+15)+"px";
}
else if( browsername == "Microsoft Internet Explorer")
{
document.getElementById('ctl00_searchGalleryDiv'). style.left = c.x-30;
document.getElementById('ctl00_searchGalleryDiv'). style.top = c.y+15;
}
}

function HideSearchGallery()
{
document.getElementById('ctl00_searchGalleryDiv'). style.visibility = "hidden";
}

function drag_drop(e)
{
if (ie5&&dragapproved&&event.button==1){
document.getElementById('ctl00_searchGalleryDiv'). style.left=tempx+event.clientX-offsetx+"px";
document.getElementById('ctl00_searchGalleryDiv'). style.top=tempy+event.clientY-offsety+"px";
}
else if (ns6&&dragapproved){
document.getElementById('ctl00_searchGalleryDiv'). style.left=tempx+e.clientX-offsetx+"px";
document.getElementById('ctl00_searchGalleryDiv'). style.top=tempy+e.clientY-offsety+"px";
}
}
function initializedrag(e)
{
offsetx=ie5? event.clientX : e.clientX;
offsety=ie5? event.clientY : e.clientY;

tempx=parseInt(document.getElementById('ctl00_sear chGalleryDiv').style.left);
tempy=parseInt(document.getElementById('ctl00_sear chGalleryDiv').style.top);

dragapproved=true;
document.getElementById('ctl00_searchGalleryDiv'). onmousemove=drag_drop;
document.getElementById('ctl00_searchGalleryDiv'). onmouseout =stopdrag;
}
function stopdrag()
{
dragapproved=false;
document.getElementById('ctl00_searchGalleryDiv'). onmousemove=null;
}



the above sample helps u clearly

__________________
.....................................
''''''Rajesh''''''
Ants. . . . . . Like me

Hey Rajesh,

It looks superb and works fine for me, why cant you give me some more optimized code using pure AJAX.

Thanks in advance

__________________
J.Saravanan

hi

<ajaxToolkit:ModalPopupExtender ID="MPE" runat="server"
TargetControlID="LinkButton1"
PopupControlID="Panel1"
BackgroundCssClass="modalBackground"
DropShadow="true"
OkControlID="OkButton"
OnOkScript="onOk()"
CancelControlID="CancelButton"
PopupDragHandleControlID="Panel3" />

__________________
.....................................
''''''Rajesh''''''
Ants. . . . . . Like me

Hey Rajesh, Can you explain the properties in detail...?

__________________
J.Saravanan

hi

* TargetControlID - The ID of the element that activates the modal popup

* PopupControlID - The ID of the element to display as a modal popup

* BackgroundCssClass - The CSS class to apply to the background when the modal popup is displayed

* DropShadow - True to automatically add a drop-shadow to the modal popup

* OkControlID - The ID of the element that dismisses the modal popup

* OnOkScript - Script to run when the modal popup is dismissed with the OkControlID

* OkCancelID - The ID of the element that cancels the modal popup

* OkCancelScript - Script to run when the modal popup is dismissed with the CancelControlID

* PopupDragHandleControlID - The ID of the embedded element that contains the popup header/title which will be used as a drag handle

* X - The X coordinate of the top/left corner of the modal popup (the popup will be centered horizontally if not specified)

* Y - The Y coordinate of the top/left corner of the modal popup (the popup will be centered vertically if not specified)

__________________
.....................................
''''''Rajesh''''''
Ants. . . . . . Like me

Hi Rajesh,

Thanks for your help, will try in my environment and let you know if i need
your help....

__________________
J.Saravanan