How to make ModalPopup drag/drop
11,644
Try this
<style type="text/css">
.modalPopup
{
background-color: #ffffdd;
border-width: 3px;
border-style: solid;
border-color: Gray;
padding: 3px;
width: 100%;
}
</style>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Button ID="btnAddNew" runat="server" Text="New Expanse" />
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" CancelControlID="btnCancel"
OkControlID="btnOkay" TargetControlID="btnAddNew" PopupControlID="Panel1" PopupDragHandleControlID="PopupHeader"
Drag="true" BackgroundCssClass="ModalPopupBG">
</cc1:ModalPopupExtender>
<div class="popupConfirmation" id="Panel1" style="display: none">
<asp:Panel runat="server" ID="PopupHeader" CssClass="modalPopup">
**************** Drag me ****************
</asp:Panel>
<iframe id="frameeditexpanse" src="http://www.bing.com" frameborder="1" height="500px"
width="520px"></iframe>
<div class="popup_Buttons" style="display: none">
<input id="btnOkay" type="button" value="Speichern" />
<input id="btnCancel" type="button" value="Abbrechen" />
</div>
</div>
Comments
-
Tarasov almost 2 years
I use a ModalPopupExtender from the Ajax ControlToolkit in my Webapplication.I set it's Drag property is true,but when I drag the popup panel and drop it at the new position,it comes back the original position at once.I want to get the effect like the Sample, can drag/drop at different position. How in the example on the page ..
http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/ModalPopup/ModalPopup.aspx
Here My Code:
<form id="form1" runat="server"> <asp:scriptmanager id="ScriptManager1" runat="server"> </asp:scriptmanager> <asp:button id="btnAddNew" runat="server" text="New Expanse" /> <asp:modalpopupextender id="ModalPopupExtender1" runat="server" cancelcontrolid="btnCancel" okcontrolid="btnOkay" targetcontrolid="btnAddNew" popupcontrolid="Panel1" popupdraghandlecontrolid="PopupHeader" drag="true" backgroundcssclass="ModalPopupBG"> </asp:modalpopupextender> <div class="popupConfirmation" id="Panel1" style="display: none"> <iframe id="frameeditexpanse" src="Benutzer.aspx" frameborder="1" height="500px" width="520px"> </iframe> <div class="popup_Buttons" style="display: none"> <input id="btnOkay" type="button" value="Speichern" /> <input id="btnCancel" type="button" value="Abbrechen" /> </div> </div>
PS: And I want input in the TextBoxes in the Background if the Dialog is open.
update:
...
<asp:modalpopupextender id="ModalPopupExtender1" runat="server" cancelcontrolid="btnCancel" okcontrolid="btnOkay" targetcontrolid="btnAddNew" popupcontrolid="Panel1" popupdraghandlecontrolid="PopupHeader" drag="true" backgroundcssclass="ModalPopupBG"> </asp:modalpopupextender> <div id="PopupHeader" style="display: none; background-color:Blue"> Benutzerinformationen </div> <div class="popupConfirmation" id="Panel1" style="display: none"> <iframe id="frameeditexpanse" src="ZweiteSeite.aspx" frameborder="1"> </iframe> <div class="popup_Buttons" style="display: none"> <input id="btnOkay" type="button" value="Speichern" /> <input id="btnCancel" type="button" value="Abbrechen" /> </div>
...
-
Ishikawa over 3 yearsCan we use a client control id instead of a server one ? (like a simple
<div id="header">Drag me</div>
) -
Ishikawa about 3 yearsEDIT : Yes, we can use a client
div
as draggable section. But you have to keep in mind that to make this work, the draggable section must be the first child of your popup wrapper (in @yogi example,popupConfirmation
).