Makale Özeti

Pop-up blocker'a takilmayan Modal-Dialog penceresi yapalim.

Makale

Asp.NET'te Detay Penceresi

    Merhabalar. Önceki makalemde bir MessageBox'ın nasıl olması gerektiğinden bahsetmiş ve bu özelliklere uygun bir messageBox yapmıştık. Şimdi ise yine benzer kodları kullanarak Modal-Dialog ekranı, hatta bileşeni yapacağız.

    Öncelikle gerekliliklerimizi belirleyelim:

            Modal-Dialog içerisinde istediğimiz herhangi bir içeriği ekleyebilmeliyiz. Yani başka bir deyişle, modal-dialog'un içerisinde tüm Asp.NET sayfalarını sorunsuz kullanabilmeliyiz.
            Modal-Dialog olmasının mantığı, dialog gösterilir iken (aktifken) arkasında kalan, kendisini çağıran sayfanın üzerindeki kontrollere kullanıcı erişimini engellemektir. Öyleyse dialoğumuz gösterildiğinde arkadaki içerik blocklanmalı.
            Ve son olarak, yeni bir sayfa göstereceğimiz, eski sayfayı kullanmaya devam edeceğimize göre, pop-up blocker uygulamalarına takılmayacak bir sistem kurmalıyız.

    Javascriptte bulunan  

    <script language="javascript">

        function Goster()

        {

             window.showModalDialog('test.aspx')

        }

    </script>

işlemi ile bu isteklerimizi çok kolay yapabiliriz. 1'i dışında : Pop-up Blocker.

   Bu nedenle çok daha verimli çalışan bir kontrole ihtiyacımız var ve aradığımız cevap yine HTML panellerinde (div'lerde). İzlememiz gereken mantık yine MessageBox'taki gibi,
            arkadaki içeriği gizlemek için transparan ve z-index i yuksek bir panel,
            detay alanını gösterebilmek için z-index'i daha da yüksek olan bir baska panel,
            bir web sayfası gösterebilmek için  frame,
            arkada kalan içerikteki ComboBox (dropdownlistler'i) gizlemek için biraz kod (javascript) (kısa bilgi: Yapıları gereği, dropdownlist'ler sayfa içerisinde her zaman en yüksek z-index'e sahip olurlar. Bu nedenle dropdownlistleri de-aktif edebilmek için onların gizlenmesine ihtiyacımız vardır.)
            ve son olarak bu panelleri gösterip gizleyecek biraz daha kod (javascript).

Hemen panel yerleşimine bakalım.

<div id="popupMask"></div>

<div id="popupContainer">

   <div id="popupInner">

      <div id="popupTitleBar">

          <div id="popupTitle"></div>

          <div id="popupControls">

                <img src="Resources/img/closebox.gif" onclick="hidePopWin(false);" />

          </div>

      </div>

          <iframe src='' style="width: 100%; height: 100%; background-color: transparent;"

            scrolling="auto" frameborder="0" allowtransparency="true" id="popupFrame" name="popupFrame"

            width="100%" height="100%"></iframe>

   </div>

</div>

    Kodu indirip my.css dosyasını incelerseniz, popupMask için z-index'in 200, popupContainer için 201, popupFrame için 202 ve popupTitleBar için ise 203 verildiğini göreceksiniz. (uzun olduğu için burada diğer style'lar ile yer doldurmak istemedim.)

    Son olarak yapmamız gereken, panelleri gösterip saklayacak, ortalayacak biraz javascript yazmak. Bunun içinde my.js'i inceleyebilirsiniz.

    Peki, bunu nasıl kullanacağız? Sadece javascript'te bulunan Show() fonksiyonunu çağırmanız yeterli. Kodları incelediğinizde kolaylığını göreceksiniz.

    Son olarak ekran görüntüleri de şu şekilde olacak:

   
Yukarıda, penceremiz görünmeden önce, herhangi bir aspx sayfası görünmekte.


Bu resimde ise, pencere açılmış ve içerisinde windowInside.aspx sayfası gösterilmekte.

    Çalışmalarınızda kolayca kullanabilmeniz dileğiyle.

Kivanc OZUOLMEZ

Proje Kodlari (2005 Release version)