Slobada

CSS Target Ozelligi Ile Ayni Sayfada Birden Fazla Modal Icerik Gosterme Sadece CSS

KODUN ÖNİZLEMESİ:
Box 1 Box 2 Box 3
X İçerik 1
X İçerik 2
X İçerik 3

Sadece CSS İle Hazırlanmış Modal İçerik Kodlaması

Modal içerik kodlamaları genellikle JavaScript kullanarak hazırlandığı için pratik bir şekilde aynı sayfa içinde birden fazla modal içerik göstermek pek mümkün olmamaktadır. Bu kodlamamızda JavaScript yerine CSS Target özelliğini kullanacağız. Önce Modal içerik için CSS kodlarını yazıp, daha sonra linkleri yerleştirerek, en son da modal içerikleri yerleştireceğiz. Biz kodlama içerisinde aynı sayfada 3 modal içerik gösterdik fakat siz bunu istediğiniz kadar çoğaltabilirsiniz. Tek yapmanız gereken modal içerikler için sayı vermek ve linkleri doğru yerleştirmek... Örneğin < a href="#openModal4">Box 4< / a> şeklinde link eklemiş iseniz, ilgili DIV ID'niz < div id = "openModal4" class="modalDialog" > şeklinde olmalıdır.






Bu sayfa hakkındaki yorumlar:
Yorumu gönderen: Slobada, 03.02.2017, 05:44 (UTC):
Merhaba Kemal bu sorunun cevabı CSS Tabs mantığıdır. Tabs, Modal için yerleşik bir alternatiftir. Tabs içerikleri bu sayfada anlattığımız CSS Target özelliği ile de yazılabilir. Slobada'ın alt bölümündeki kodlama da bu mantık ve bu özellik kullanılarak yazılmıştır. Bu konuda CSS TARGET TABS gibi indirgenmiş kelime araması yaparsan işin mantığını anlayabilir ve kendin de bir kodlama hazırlayabilirsin veya hazır örnek kodlamalara ulaşabilirsin. İyi çalışmalar.

Yorumu gönderen: Analog Forum/Teknolanya/Kemal Çağrı, 01.02.2017, 13:52 (UTC):
Peki,üstüne tıklayınca modal açmadan nasıl yapabiliriz?Önizlemesi footer'da (Slobada'nın) var.



Bu sayfa hakkında yorum ekle:
İsminiz:
Mesajın: