9 Mayıs 2012 Çarşamba

ModalPopup Extender

   ModalPopupExtender kullanıcıların sayfanın kalanından bağımsız olarak şekilsel bir tarzda belirli bir bölümünün görüntülenmesini sağlar. Şekilsel içerik herhangi bir hiyerarşik kontroller olabilir ve özgün bir sitil uygulanmış bir arkaplanın üzerinde görüntülenir. 

   Görüntülendiğinde, sadece modal içerik üzerinde işlemler yapılabilir, safanın geri kalan kısmında tıklama yapılamaz. Kullanıcı modal içerikle etkileşimde bulunduğunda, tıklanan bir Tamam/İptal kontrolü sonucu özel betik çalıştırılır. Özel betik modal mode aktif olduğu zaman uygulanacaktır. Eğer bir postback gerekiyorsa basitçe tamam/iptal butonuna izin verilir ve sayfa yeniden çalıştırılır. Modal popup sayfa konumunu X ve Y özelliklerini değiştirerek ayarlayabilirsiniz. Varsayılan olarak sayfanın merkezinde görüntülenir. X ve Y değerlerine göre yatay ve dikey hareket eder. Modal içerik görüntülenirken veya gizlenirken OnShowing/OnShown/OnHiding/OnHidden animasyonlarını kullanabilirsiniz. 

Örnek kod:

<ajaxToolkit:ModalPopupExtender ID="MPE" runat="server"
    TargetControlID="LinkButton1"
    PopupControlID="Panel1"
    BackgroundCssClass="modalBackground" 
    DropShadow="true" 
    OkControlID="OkButton" 
    OnOkScript="onOk()"
    CancelControlID="CancelButton" 
    PopupDragHandleControlID="Panel3" >
        <Animations>
            <OnShowing> ..  </OnShowing>
            <OnShown>   ..  </OnShown>    
            <OnHiding>  ..  </OnHiding>            
            <OnHidden>  ..  </OnHidden>            
        </Animations>
    </ajaxToolkit:ModalPopupExtender>
italik olarak yazılı olanlar opsiyoneldir.

Özellikleri :


  • TargetControlID - Modal içeriği aktif hale getiren kontrolün ID değeri.
  • PopupControlID - Modal popup görüntüleyen kontrolün ID değeri. Genellikle Panel kontrolü kullanılır.
  • BackgroundCssClass - Modal popup görüntülendiğinde arkaplana uygulanacak css class.
  • DropShadow - True olması halinde Modal popup arkasında gölge efekti uygulanır.
  • OkControID - Modal  popup bırakan kontrolün ID değeri.
  • OnOkScript - Modal popup OKControlID ile birlikte bırakıldığında çalıştırılacak olan script değeridir.
  • CancelControlID - Modal popup'dan çıkmak için kullanılan kontrolün ID değeri.
  • OnCancelScript - Modal popupCancelControlId ile birlikte bırakıldığında çalıştırılan script.
  • PopupDragHandleControlID - Modal popup içeriğini sürüklemek için kullanılan kontrolün ID değeri.
  • X - Modal popup'ı x sol üst köşesinden x koordinat hareket ettirir.
  • Y - Modal popup'ı sol üst köşesinden y koordinat kaydırır.
  • RepositionMode - Modal popup pencerede nerede gösterileceğini belirtir.