მრავალფეროვანი მიზნებისათვის გამოსაშლელ ფანჯრებს მრავალი გამოყენება აქვს ვებ – კონსტრუქციაში. მათი საშუალებით შეგიძლიათ შექმნათ სხვადასხვა სახის მენიუები, განათავსოთ სარეკლამო ტექსტები და გრაფიკები, ინსტრუმენტული მითითებები რთული ფორმების შევსებისას და მოსახერხებელია ფორმების განთავსება ფანჯრებში, რომლებიც გვერდზე არ იკავებს ადგილს. ჩვენს სტატიაში ნახავთ აღწერას, თუ როგორ შეგიძლიათ გააკეთოთ ასეთი ფანჯარა.
Ეს აუცილებელია
HTML- ის ძირითადი ცოდნა
ინსტრუქციები
Ნაბიჯი 1
popup, html, ფარული ფენა
ნაბიჯი 2
ვებ – გვერდის მრავალ გვერდზე ჩანს, რომ სხვადასხვა JavaScript ჩარჩოების ფანტასტიკური ბიბლიოთეკები (jQuery, MooTools, Prototype და ა.შ.) გამოიყენება გვერდებზე pop-up ფანჯრების შესაქმნელად. ამასთან, სინამდვილეში, ისინი არ არიან საჭირო ამ კონკრეტული პრობლემის გადაჭრისას. ჰიპერტექსტის მარკირების ენაზე (HTML) და კასკადური სტილის ცხრილებში (CSS) ხელმისაწვდომი ინსტრუმენტები საკმარისია ამომხტარი ფანჯრების შესაქმნელად. ამ გზით შექმნილი ფანჯრები იმუშავებს, მიუხედავად იმისა, ჩართულია თუ არა JavaScript ვიზიტორის ბრაუზერში.
ყველა კოდი, რომელიც ქმნის ახალ ფანჯარას, შეიძლება განთავსდეს ორ ხაზზე. პირველი სტრიქონი ქმნის ბმულს, რომელზეც უნდა დააჭიროთ ფანჯარა:
Დააკლიკე აქ!
აქ, ბმულის ტემის onmouseover ატრიბუტი ადგენს მაუსის კურსორის ნაგულისხმევ ტიპს ბმულებისთვის. Onclick ატრიბუტი განსაზღვრავს, რომ ბმულის დაჭერისას, ფარული PopUp ბლოკი უნდა გახდეს ხილული.
მეორე ხაზი, ფაქტობრივად, pop-up ფანჯარაა. PopUp იდენტიფიკატორის ფენა და სტილის ატრიბუტში მითითებული ფანჯრის ზომა, ტექსტის ფერი და ზომა, ფონი და საზღვარი:
ეს არის ამომხტარი ტექსტი
ის ნაგულისხმევად არ ჩანს - ეს მიეთითება ეკრანის ამორჩევით, რომლის მნიშვნელობაც არ არის ფენის სტილის აღწერაში.
სინამდვილეში, ეს არის მხოლოდ ის, რაც pop-up ფანჯრის შესაქმნელად გჭირდებათ - განათავსეთ ეს ორი ხაზი თეგებსა და თქვენს გვერდს შორის და ის მზად არის გასაშვებად.
ნაბიჯი 3
იმისათვის, რომ გახსნათ pop-up ფანჯარა თეგის წინ, უნდა დაამატოთ ბმული, რომელიც ასრულებს საპირისპირო მოქმედებას - PopUp იდენტიფიკატორით ხილული ფენის დამალვას:
დახურვა
ნაბიჯი 4
და თუ გსურთ ფანჯარა გამოჩნდეს არა დაწკაპუნებით, არამედ მაუსის კურსორის გადაადგილებით, მაშინ პირველი სტრიქონი ბმულით უნდა შეიცვალოს ამ გზით:
მაუსი აქეთ გადმოიწიე!
ნაბიჯი 5
თქვენ ახლა იცნობთ pop-up ფანჯრის კოდის პრინციპს და სტრუქტურას, მისი გარეგნობისა და შინაარსის დიზაინი მთლიანად დამოკიდებულია თქვენს მიზნებსა და წარმოსახვაზე.
