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ında yorum ekle:
İsminiz:
Mesajın: