2012-08-14 51 views
1

我在我的Webapplication.I中使用了Ajax ControlToolkit中的ModalPopupExtender,将其设置为Drag属性为true,但是当我拖动弹出面板并将其放在新位置时,它会返回原始位置我想要获得像样品一样的效果,可以在不同的位置拖放。如何在页面上的例子..如何使ModalPopup拖放

http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/ModalPopup/ModalPopup.aspx

这里我的代码:

<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:我想在文本框输入的背景,如果对话框打开。

更新:

...

<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> 

...

+0

哪里是'PopupHeader'? 'PopupHeader'必须是通过拖放操作完成的某个div或面板。 – yogi 2012-08-14 07:36:17

+0

我是怎么做到的?我新与这个控制:(我需要帮助或一个很好的链接 – Tarasov 2012-08-14 07:57:57

+0

看到我的更新...是吗? – Tarasov 2012-08-14 08:06:42

回答

5

试试这个

<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> 
+0

是的,它的工作.... :) – Tarasov 2012-08-14 08:48:57