How can the ModalPopup become draggable?

Okay, so following the normal functionality of a modal popup in all desktop apps, the modal popup should be able to be dragged. Is this possible? If so, does that already exist as a property? Or would it need to be added?

For example, say you are on a page with lots of data and you want to add a new data element. So you hit the "Add data" button which neatly shows the modal popup. Uh oh, I forgot what I was going to name it .. and if I could just move this window for a second to see what the last name was .. ugh, looks like I need to close this window to find out.

Obviously, if I needed (or whether the team needed) to add this kind of functionaltiy, then I'd need a draghandle ..

We don't currently support this but it's a good feature request. I've logged it as work item 518. Thanks!

You can also try doing this yourself. I haven't tried this but generally:

1) In ModalPopupExtender add a RequiredScript attribute for typeof(DragPanelExtender)

2) In ModalPopupBehavior, instantiate a Sys.UI.LayoutBehavior and attach it to the control referenced by "PopupControlID"

I think this library is able to get the drag and drop going for the ModalPopup as I have used with similar ModalPopups (not ajax). It does pictures, Divs and other HTML objects.

http://www.walterzorn.com/dragdrop/dragdrop_e.htm

Regards

Sorry .. it was really more of a feature request than anything else. :)

David understood me ..

Anyways, I tried your suggestion last night David.

< .. in ModalPopupBehavior.js ..>this.initialize() = function() { ... "existing init code" ... if (true) { _dragBehavior = new Sys.UI.LayoutBehavior(); _dragControl = $object(_PopupControlID); if (!_dragControl) { _dragControl = new Sys.UI.Control(_foregroundElement); _dragControl.initialize(); } _dragControl.get_behaviors().add(_dragBehavior); _dragBehavior.initialize(); }}

But that .. didn't work. It doesn't really do anything, so I'm not sure what I'm doing wrong.

I dunno if this is the best forum to say this but damned i hate javascript...

I copied your code and worked for me (with bugs)...

And the modal window moves for you?

worked with some bugs... i made a thick border on the pannel...

1. it drags but doesn't get fixed
2. sometimes it doesn't show the drag but it fixes

just a note... i have the latest version of atlas control toolkit...

(every day i update from codeplex (i recommend this, but i'm not yet experienced with atlas or even ajax stuff))

Can you post your test page? I was just changing the Toolkit dll and then was loading the SampleWebsite provided with the toolkit to see if it worked or not.

In my case, doesn't work. No errors, but doesn't work.

there it goes, BUT -->> i didn't try to fix the bugs! All i did was: put your stuff into .js write aspx, press play... saw it ON THE WAY IT WAS AND DID NOTHING...

At least you will be able to see the modal popup being draged...

Good luck fixing the problems ;) needing, i'm here...

<asp:ButtonID="_showModalPopup"runat="server"Text="Show dragable modal popup!"/> <asp:PanelID="_handlePanel"runat="server"Height="281px"Width="929px"><asp:PanelID="_dragableModalPopup"runat="server"BorderStyle="Solid"BorderColor="Black"BorderWidth="8"Width="300"Height="300">

I'm a dragable modal popup!

<br/><br/><asp:ButtonID="_okButton"runat="server"Text="OK"/><asp:ButtonID="_cancelButton"runat="server"Text="Cancel"/><asp:ButtonID="_postBackTest"runat="server"Text="Make me a post back"OnClick="Button4_Click"/>

_okButton

</asp:Panel></asp:Panel><asp:LabelID="_lblTest"runat="server"Text=""></asp:Label><atlasToolkit:ModalPopupExtenderID="ModalPopupExtender1"runat="server"><atlasToolkit:ModalPopupPropertiesTargetControlID="_showModalPopup"PopupControlID="_dragableModalPopup"BackgroundCssClass="watermarked"OkControlID="_okButton"CancelControlID="_cancelButton"OnOkScript="okScript()"OnCancelScript="cancelScript()"ID="_modalPopupProperties"/></atlasToolkit:ModalPopupExtender><atlasToolkit:DragPanelExtenderID="DragablePanelExtender"runat="Server"><atlasToolkit:DragPanelPropertiesTargetControlID="_dragableModalPopup"DragHandleID="_handlePanel"/></atlasToolkit:DragPanelExtender>

Just a note: I used the "AtlasControlToolkit test project" wich can be found on the latest releases on codeplex.com. I'm posting the full code..

<%

@.PageLanguage="C#"MasterPageFile="~/Default.master"CodeFile="ModalPopup.aspx.cs"Inherits="Automated_ModalPopup"Title="ModalPopupTests Tests" %>

<

asp:ContentID="Content1"ContentPlaceHolderID="ContentPlaceHolder1"runat="Server"><asp:ButtonID="_showModalPopup"runat="server"Text="Show dragable modal popup!"/> <asp:PanelID="_handlePanel"runat="server"Height="281px"Width="929px"><asp:PanelID="_dragableModalPopup"runat="server"BorderStyle="Solid"BorderColor="Black"BorderWidth="8"Width="300"Height="300">

I'm a dragable modal popup!

<br/><br/><asp:ButtonID="_okButton"runat="server"Text="OK"/><asp:ButtonID="_cancelButton"runat="server"Text="Cancel"/><asp:ButtonID="_postBackTest"runat="server"Text="Make me a post back"OnClick="Button4_Click"/>

_okButton

</asp:Panel></asp:Panel><asp:LabelID="_lblTest"runat="server"Text=""></asp:Label><atlasToolkit:ModalPopupExtenderID="ModalPpoupExtender1"runat="server"><atlasToolkit:ModalPopupPropertiesTargetControlID="_showModalPopup"PopupControlID="_dragableModalPopup"BackgroundCssClass="watermarked"OkControlID="_okButton"CancelControlID="_cancelButton"OnOkScript="okScript()"OnCancelScript="cancelScript()"ID="_modalPopupProperties"/></atlasToolkit:ModalPopupExtender><atlasToolkit:DragPanelExtenderID="DragablePanelExtender"runat="Server"><atlasToolkit:DragPanelPropertiesTargetControlID="_dragableModalPopup"DragHandleID="_handlePanel"/></atlasToolkit:DragPanelExtender><scripttype="text/javascript">// (c) Copyright Microsoft Corporation.// This source is subject to the Microsoft Permissive License.// See http://www.microsoft.com/resources/sharedsource/licensingbasics/sharedsourcelicenses.mspx.// All other rights reserved.// Script objects that should be loaded before we runvar typeDependencies = ['AtlasControlToolkit.ModalPopupBehavior'];// Test Harnessvar testHarness =null;// Controls on the pagevar show;var popup;var ok;var cancel;var postback;var behavior;// Variablesvar msg;function okScript() {

msg =

'ok';

}

function cancelScript() {

msg =

'cancel';

}

function checkPopupNotVisible() {

testHarness.assertEqual(popup.style.display,

'none','Popup should not be visible');

}

function checkPopupVisible() {

testHarness.assertEqual(popup.style.display,

'','Popup should be visible');

}

function checkMessage(m) {

testHarness.assertEqual(msg, m,

'Message \"'+msg+'\" should be \"'+m+'\"');

}

function checkLabel(m) {var label = testHarness.getElement("ctl00_ContentPlaceHolder1_Label1").innerText;

testHarness.assertEqual(label, m,

'Label \"'+label+'\" should be \"'+m+'\"');

}

function showPopup() {

show.click();

}

function clickOK() {

ok.click();

}

function clickCancel() {

cancel.click();

}

// Register the testsfunction registerTests(harness) {

testHarness = harness;

var test;

show = testHarness.getElement(

"ctl00_ContentPlaceHolder1_Button1");

popup = testHarness.getElement(

"ctl00_ContentPlaceHolder1_Panel1");

ok = testHarness.getElement(

"ctl00_ContentPlaceHolder1_Button2");

cancel = testHarness.getElement(

"ctl00_ContentPlaceHolder1_Button3");

postback = testHarness.getElement(

"ctl00_ContentPlaceHolder1_Button4");

behavior = testHarness.getObject(

"ModalPopupProperties1");

msg =

'';

behavior.set_DropShadow(!behavior.get_DropShadow());

test = testHarness.addTest(

"Initial State");

test.addStep(

function() { checkLabel('Label1'); });

test.addStep(checkPopupNotVisible);

test.addStep(

function() { checkMessage(''); });

test = testHarness.addTest(

"Show Event/State");

test.addStep(showPopup);

test.addStep(checkPopupVisible);

test.addStep(

function() { checkMessage(''); });

test = testHarness.addTest(

"Cancel Event/State");

test.addStep(showPopup);

test.addStep(checkPopupVisible);

test.addStep(clickCancel);

test.addStep(checkPopupNotVisible,

function() {try { checkMessage('cancel');returntrue; }catch (ex) {returnfalse; } }, 100, 5000);

test = testHarness.addTest(

"OK Event/State");

test.addStep(showPopup);

test.addStep(checkPopupVisible);

test.addStep(clickOK);

test.addStep(checkPopupNotVisible,

function() {try { checkMessage('ok');returntrue; }catch (ex) {returnfalse; } }, 100, 5000);

test = testHarness.addTest(

"Script Show/Hide");

test.addStep(

function() { behavior._show(); });

test.addStep(checkPopupVisible);

test.addStep(

function() { behavior._hide(); });

test.addStep(checkPopupNotVisible);

test = testHarness.addTest(

"Postback");

test.addStep(

function() { behavior._show(); });

test.addPostBack(postback);

test.addStep(

function() { checkLabel('Button4'); });

}

</script>

</

asp:Content>

FYI, all I had to do was use the dragExtender in companion to the modal popup

<asp:Panel ID="pnlModal" run="server"> <div id="dragHandle" style="position:absolute; top:0px; left: 0px; height:30px; width:50px; cursor:hand;></div> <div> <iframe id="ifrmModal" runat="server" frameborder="0" height="100%" width="100%" /> </div> <div> <asp:Button Id="ModalOK" runat="server" Text="OK" UseSubmitBehavior="false" /> <asp:Button Id="ModalCancel" runat="server" Text="Cancel" UseSubmitBehavior="false" /> <asp:LinkButton ID="lnkModal" runat="server" Text="Click here" /> </div></asp:Panel><atlasToolkit:ModalPopupExtender ID="mpe1" runat="server"> <atlasToolkit:ModalPopupProperties ID="pnlModalBehavior" BackgroundCssClass="modalBackground" DropShadow="false" OkControlID="ModalOK" PopupControlID="pnlModal" TargetControlID="lnkModal" /></atlasToolkit:ModalPopupExtender><atlasToolkit:DragPanelExtender ID="dragPanelExtender1" runat="server"> <atlasToolkit:DragPanelProperties TargetControlID="pnlModal" DragHandleID="dragHandle" /> </atlasToolkit:DragPanelExtender>

KFrancis,

Just adding the DragPanelExtender works -- except if the modal popup has a drop shadow. The drop shadow does not move along with the modal popup window.

Any ideas on how to fix that?

Thanks,

Randall Price

yea, remove the drop shadow.

Hi KFrancis,

I copy&paste your code and it works. But I found one thing really weird is that if I add the quotation mark for the <style='...> property, it's no longer draggable!! (The quotation mark should be there, right?)

<div id="dragHandle" style='position:absolute; top:0px; left: 0px; height:30px; width:50px; cursor:hand;></div>

I'm using July CTP, any idea why this is happening?

And even when it's draggable, the popup won't show up at the center of page. The initial location has shifted to the right bottom. Do you know how to fix this?