Bir ModalPopup’ı Konumlandırma (C#)Positioning a ModalPopup (C#)

Hristia WENZ tarafındanby Christian Wenz

Kodu indirin veya PDF 'yi indirinDownload Code or Download PDF

AJAX denetim araç setinde ModalPopup denetimi, istemci tarafı anlamını kullanarak kalıcı bir açılan pencere oluşturmanın basit bir yolunu sunar.The ModalPopup control in the AJAX Control Toolkit offers a simple way to create a modal popup using client-side means. Ancak denetim, açılan pencereyi konumlandırmak için yerleşik bir işlevsellik sunmaz.However the control does not offer a built-in functionality to position the popup.

Genel bakışOverview

AJAX denetim araç setinde ModalPopup denetimi, istemci tarafı anlamını kullanarak kalıcı bir açılan pencere oluşturmanın basit bir yolunu sunar.The ModalPopup control in the AJAX Control Toolkit offers a simple way to create a modal popup using client-side means. Ancak denetim, açılan pencereyi konumlandırmak için yerleşik bir işlevsellik sunmaz.However the control does not offer a built-in functionality to position the popup.

AdımlarSteps

ASP.NET AJAX ve Denetim araç seti işlevlerini etkinleştirmek için ScriptManager.In order to activate the functionality of ASP.NET AJAX and the Control Toolkit, the ScriptManager. Denetim, sayfada herhangi bir yere yerleştirmeli (ancak <form> öğesi içinde):control must be put anywhere on the page (but within the <form> element):

<asp:ScriptManager ID="asm" runat="server" />

Ardından, kalıcı açılan pencere olarak hizmet veren bir panel ekleyin.Next, add a panel which serves as the modal popup. Açılan pencereyi kapatmak için bir düğme kullanılır:A button is used to close the popup:

<asp:Panel ID="ModalPanel" runat="server" Width="500px">
 ASP.NET AJAX is a free framework for quickly creating a new generation of more 
 efficient, more interactive and highly-personalized Web experiences that work 
 across all the most popular browsers.<br />
 <asp:Button ID="OKButton" runat="server" Text="Close" />
</asp:Panel>

Açılan pencere her gösterildiğinde sayfada belirli bir yerde konumlandırılmalıdır.Whenever the popup is shown, it shall be positioned at a certain place in the page. Bu görev için, istemci tarafı bir JavaScript işlevi oluşturulur.For this task, a client-side JavaScript function is created. Önce panele erişmeyi dener.It first tries to access the panel. Bu işlem başarılı olursa, panelin konumu CSS ve JavaScript kullanılarak ayarlanır (açılan menünün konumunu ' de değiştirin).If it succeeds, the panel's position is set using CSS and JavaScript (change the position of the popup at will). Ancak ModalPopupExtender denetimi de açılan pencereyi konumlandırmaya çalışır.However the ModalPopupExtender control also tries to position the popup. Bu nedenle, JavaScript kodu bir saniyede her onuncu açılan pencereyi sürekli konumlandırır.Therefore, the JavaScript code repeatedly positions the popup, every tenth of a second.

<script type="text/javascript">
 var id = null;
 function movePanel() 
 {
 var pnl = $get("ModalPanel");
 if (pnl != null) 
 {
 pnl.style.left = "50px";
 pnl.style.top = "50px";
 id = setTimeout("movePanel();", 100);
 }
 }

Gördüğünüz gibi, JavaScript yönteminin dönüş setTimeout() değeri genel bir değişkende kaydedilir.As you can see, the return value of the setTimeout() JavaScript method is saved in a global variable. Bu, clearTimeout() yöntemi kullanılarak, isteğe bağlı açılan pencerenin tekrarlanmış konumunu durdurmaya izin verir:This allows to stop the repeated positioning of the popup on demand, using the clearTimeout() method:

function stopMoving() 
 {
 clearTimeout(id);
 }
</script>

Artık her şey, her zaman uygun olduğunda tarayıcının bu işlevleri çağırmasını sağlamak için kullanılabilir.Now all that is left to do is to make the browser call these functions whenever appropriate. Düğme tıklandığında paneli tetikleyen movePanel() JavaScript işlevi çağrılmalıdır:The movePanel() JavaScript function must be called when the button is clicked that triggers the panel:

<div>
 <asp:Button ID="btn1" runat="server" Text="Launch Modal Popup" 
 OnClientClick="movePanel();" />
</div>

stopMoving() işlevi, açılan pencere kapatıldığında oynat ' a gelir ve bu, ModalPopupExtender denetiminde tetiklenebilir:And the stopMoving() function comes into play when the popup is closed this can be triggered in the ModalPopupExtender control:

<ajaxToolkit:ModalPopupExtender ID="mpe" runat="server"
 TargetControlId="btn1" PopupControlID="ModalPanel" OkControlID="OKButton"
 OnOkScript="stopMoving();" />

, belirlenen konumda kalıcı açılan pencere görüntülenirThe modal popup appears at the designated position

Belirlenen konumda kalıcı açılan pencere görünür (tam boyutlu görüntüyü görüntülemek Için tıklayın)The modal popup appears at the designated position (Click to view full-size image)