Çok çeşitli amaçlar için açılır pencerelerin web yapımında birçok kullanımı vardır. Çeşitli menüler oluşturmak, reklam metinleri ve grafikleri yerleştirmek, karmaşık formları doldururken araç ipuçları yerleştirmek için kullanılabilirler ve formların kendilerini sayfada yer kaplamayan pencerelere yerleştirmek uygundur. Makalemizde böyle bir pencereyi nasıl yapabileceğinizin bir açıklamasını bulacaksınız.
Bu gerekli
Temel HTML bilgisi
Talimatlar
Aşama 1
açılır pencere, html, gizli katman
Adım 2
Web'deki birçok sayfada, sayfalarda açılır pencereler oluşturmak için çeşitli JavaScript çerçevelerinin (jQuery, MooTools, Prototype, vb.) süslü kitaplıklarının kullanıldığını görebilirsiniz. Ancak, aslında, bu özel sorunu çözerken gerekli değildirler. Köprü Metni Biçimlendirme Dili (HTML) ve Basamaklı Stil Sayfalarında (CSS) bulunan araçlar, açılır pencereler oluşturmak için yeterlidir. Bu şekilde oluşturulan pencereler, ziyaretçinin tarayıcısında JavaScript'in etkin olup olmadığına bakılmaksızın çalışır.
Açılır pencereyi oluşturan tüm kodlar iki satıra yerleştirilebilir. İlk satır, açılır pencereyi görüntülemek için tıklanması gereken bir bağlantı oluşturur:
Buraya Tıkla!
Burada, bağlantı etiketinin onmouseover özelliği, bağlantılar için varsayılan fare imleci türünü ayarlar. onclick özniteliği, bağlantı tıklandığında, gizli PopUp bloğunun görünür hale geleceğini belirtir.
İkinci satır aslında açılır penceredir. PopUp tanımlayıcısı ve stil özelliğinde belirtilen pencerenin boyutu, metnin rengi ve boyutu, arka plan ve kenarlık içeren katman:
Bu açılır penceredeki metin
Varsayılan olarak görünmez - bu, katman stili açıklamasında hiçbiri değeriyle ekran seçici tarafından belirtilir.
Aslında, bir açılır pencere oluşturmak için ihtiyacınız olan tek şey bu - bu iki satırı etiketler ve sayfanız arasına yerleştirin ve kullanıma hazır.
Aşama 3
Etiketin önündeki açılır pencereyi kapatabilmek için, karşıt eylemi gerçekleştiren bir bağlantı eklemeniz gerekir - görünür katmanı PopUp tanımlayıcısı ile gizler:
kapat
4. Adım
Ve pencerenin tıklatarak değil, fare imlecini gezdirerek açılmasını istiyorsanız, bağlantının bulunduğu ilk satır şu şekilde değiştirilmelidir:
fareyi buraya getirin!
Adım 5
Artık açılır pencere kodunun ilkesine ve yapısına aşinasınız ve görünüşünün ve içeriğinin tasarımı tamamen sizin hedeflerinize ve hayal gücünüze bağlı.
