Müxtəlif məqsədlər üçün açılan pəncərələrin veb tikintisində bir çox istifadəsi var. Bunlardan müxtəlif növ menyular yaratmaq, reklam mətnləri və qrafika yerləşdirmək, mürəkkəb formaları doldurarkən tövsiyələr üçün istifadə edilə bilər və formaların özlərini səhifədə yer tutmayan pəncərələrə yerləşdirmək rahatdır. Məqaləmizdə belə bir pəncərə qurmağın bir təsvirini tapa bilərsiniz.
Vacibdir
HTML haqqında əsas biliklər
Təlimat
Addım 1
popup, html, gizli qat
Addım 2
Vebdəki bir çox səhifədə müxtəlif JavaScript çərçivələrindəki (jQuery, MooTools, Prototype və s.) Xülya kitabxanaların səhifələrdə açılan pəncərələr yaratmaq üçün istifadə edildiyini görə bilərsiniz. Ancaq əslində bu problemi həll edərkən bunlara ehtiyac yoxdur. Hypertext Markup Language (HTML) və Cascading Style Sheets (CSS) içərisində olan alətlər pop-up yaratmaq üçün kifayətdir. Bu şəkildə yaradılan pəncərələr, ziyarətçinin brauzerində JavaScript-in aktiv olub-olmamasından asılı olmayaraq işləyəcəkdir.
Popup yaradan bütün kodlar iki sətirdə yerləşdirilə bilər. Birinci sətir açılan pəncərəni göstərmək üçün vurulması lazım olan bir əlaqə yaradır:
Bura basın!
Burada, link etiketinin onmouseover atributu əlaqələr üçün standart siçan imleci növünü təyin edir. Onclick atributu, linki vurduqda gizli PopUp blokunun görünməli olduğunu göstərir.
İkinci sətir, əslində, açılan pəncərəsidir. PopUp identifikatoru və üslub atributunda göstərilən pəncərənin ölçüsü, mətnin rəngi və ölçüsü, arxa plan və haşiyə ilə qat:
Bu pop-updakı mətndir
Varsayılan olaraq görünmür - bu ekran seçicisi tərəfindən təbəqə stilinin təsvirində heç bir dəyəri ilə göstərilir.
Əslində, pop-up pəncərə yaratmaq üçün yalnız bu kifayətdir - bu iki satırı etiketlər və səhifəniz arasında yerləşdirin və işə hazırdır.
Addım 3
Etiketin qarşısında açılan pəncərəni bağlaya bilmək üçün əks əməliyyatı yerinə yetirən bir keçid əlavə etməlisiniz - görünən təbəqəni PopUp identifikatoru ilə gizlədərək:
yaxın
Addım 4
Pəncərəni tıklayaraq deyil, siçan imlecini gəzdirərək açılmasını istəyirsinizsə, keçid olan ilk sətir bu şəkildə dəyişdirilməlidir:
siçanı buraya aparın!
Addım 5
İndi açılan pəncərə kodunun prinsipi və quruluşu ilə tanışsınız və görünüşünün və məzmununun dizaynı tamamilə hədəflərinizdən və xəyallarınızdan asılıdır.
