ამომხტარი მაგალითები. PopUp - ამომხტარი ფანჯარა

ეს დაასრულებს მარტივი ამომხტარი ფანჯრის შექმნას.

ამომხტარი მოდალური ფანჯრის შესაქმნელად, აიღეთ ელემენტი, შეიმუშავეთ იგი და დაამატეთ ბმული, მასზე დაწკაპუნებისას გამოჩნდება:

დოკუმენტის სათაური #okno ( სიგანე: 300 პიქსელი; სიმაღლე: 50 პიქსელი; ტექსტის გასწორება: ცენტრში; შიგთავსი: 15 პიქსელი; კონტური: 3 პიქსელი მყარი #0000 კუბ.; საზღვრის რადიუსი: 10 პიქსელი; ფერი: #0000 კუბ.; ეკრანი: არცერთი; პოზიცია: აბსოლუტური; ზედა : 0: 0, მარცხნივ: 0; ზარის ამომხტარი ფანჯარა

სრულფასოვანი მოდალური ფანჯრის შექმნის შემდეგი ნაბიჯი არის ღილაკის დამატება, რომელიც დამალავს ჩვენს ფანჯარას. ჩვენ გავაკეთებთ ღილაკს ჩვეულებრივი ბმულიდან, დავამატებთ მას და დავაპროექტებთ მას:

დოკუმენტის სათაური #okno ( სიგანე: 300 პიქსელი; სიმაღლე: 50 პიქსელი; ტექსტის გასწორება: ცენტრში; შიგთავსი: 15 პიქსელი; კონტური: 3 პიქსელი მყარი #0000 კუბ.; საზღვრის რადიუსი: 10 პიქსელი; ფერი: #0000 კუბ.; ეკრანი: არცერთი; პოზიცია: აბსოლუტური; ზედა 0. მარცხნივ: 0. სამიზნე: ბლოკირება; : #e6e6ff;)
ფანჯრის დახურვა ზარის ამომხტარი ფანჯარა სცადეთ »

მოდალური ფანჯრის ჩვენებისას გვერდის დაბნელების ეფექტისთვის, თქვენ უნდა მოათავსოთ ყველა არსებული ფანჯრის კოდი დამატებითში:

ამომხტარი ფანჯარა!
დახურეთ ფანჯარა

განათავსეთ მშობელი და გაჭიმეთ იგი ფანჯრის მთელ სიგანეზე და სიმაღლეზე. ჩვენ დავაყენეთ ის ჩვენება: არცერთი; და გადაიტანეთ ფანჯრის ზარის ბმული მასზე.

ბავშვისთვის ამოიღეთ ჩვენება: არცერთი; (ეს აღარ არის საჭირო, რადგან მშობელი ყველაფერს მალავს შიგნით). შედეგად, მშობელი პასუხისმგებელია მოდალური ფანჯრის ჩვენებაზე და გვერდის ფონის დაბნელებაზე, ხოლო ბავშვი მხოლოდ თავად ფანჯრის გაფორმებაზეა პასუხისმგებელი:

დოკუმენტის სათაური #zatemnenie ( ფონი: rgba(102, 102, 102, 0.5); სიგანე: 100%; სიმაღლე: 100%; პოზიცია: აბსოლუტური; ზედა: 0; მარცხნივ: 0; ჩვენება: არცერთი; ) #okno ( სიგანე: 300px: 15px; საზღვრები: 1px: #0000cc padding;
ფანჯრის დახურვა ზარის ამომხტარი ფანჯარა სცადეთ »

შენიშვნა: თუ თქვენ გჭირდებათ, რომ მომხმარებელმა დაუყოვნებლივ დაინახოს ამომხტარი ფანჯარა გვერდზე შესვლისას (და არ დაურეკოს მას ბმულით), მაშინ ფანჯრის ID-თან ერთად უნდა შეიყვანოთ გვერდის მისამართი (მაგალითად, მისამართი შეიძლება გამოიყურებოდეს ასე: site.ru/papka/documet.

PopUP არის pop-up რეკლამა, რომელიც შექმნილია ვებ ტრაფიკის მოსაზიდად ან ელ.ფოსტის მისამართების შესაგროვებლად. ასეთი ელემენტები ხშირად არის ინტერნეტ რეკლამის ფორმები WorldWideWeb-ზე. როგორც წესი, ეს არის ახალი ფანჯრები, რომლებიც იხსნება ვებ ბრაუზერში რეკლამების საჩვენებლად. ისინი, როგორც წესი, გენერირდება JavaScript-ით, ჯვარედინი სკრიპტირების (XSS) გამოყენებით, ზოგჯერ მეორადი დატვირთვით და AdobeFlash-ის გამოყენებით.

PopUP-ის ვარიაცია არის pop-up რეკლამები, რომლებიც იხსნება ბრაუზერის ახალ ფანჯარაში, რომელიც დამალულია აქტიურ ფანჯარაში.

პირველი pop-up რეკლამა გამოჩნდა Tripod.com-ზე 1990-იანი წლების ბოლოს. ეთან ცუკერმანი ირწმუნება, რომ მან დაწერა კოდი ცალკეულ ფანჯრებში რეკლამების გასაშვებად, საჩივრების საპასუხოდ ბანერების რეკლამებთან დაკავშირებით. შემდგომში, დეველოპერმა არაერთხელ მოიხადა ბოდიში იმ უხერხულობისთვის, რომელიც მისმა გამოგონებამ დაიწყო.

Opera იყო პირველი დიდი ბრაუზერი, რომელიც მოიცავდა ამომხტარი ბლოკირების ხელსაწყოებს. Mozilla ბრაუზერმა მოგვიანებით გააუმჯობესა ეს განვითარება გვერდის ჩატვირთვისას წარმოქმნილი PopUP ფანჯრის დაბლოკვით. 2000-იანი წლების დასაწყისში, ყველა მთავარმა ბრაუზერმა, გარდა Internet Explorer-ისა, საშუალებას აძლევდა მომხმარებელს თითქმის მთლიანად აღმოფხვრა არასასურველი pop-up რეკლამები. 2004 წელს მაიკროსოფტმა გამოუშვა Windows XP SP2, რომელმაც დაამატა ამ ბრაუზერის დაბლოკვა.

თანამედროვე ბრაუზერების უმეტესობას გააჩნია ამომხტარი დაცვის საშუალებები. მესამე მხარის ხელსაწყოები ჩვეულებრივ მოიცავს სხვა ფუნქციებს, როგორიცაა რეკლამის ფილტრაცია.

ჩამოტვირთული კონტენტის ზოგიერთმა ტიპმა - სურათები, უფასო მუსიკა და სხვა - შეიძლება გამოიწვიოს ამომხტარი ფანჯარა. გარდა ამისა, ისინი ზოგჯერ ჩვეულებრივ ვებგვერდებს ჰგავს და საიტის სახელი გამოჩნდება საძიებო ზოლში. ბევრი რესურსი იყენებს ამომხტარ ფანჯრებს ინფორმაციის საჩვენებლად, ამჟამად ღია გვერდის შეფერხების გარეშე. მაგალითად, თუ თქვენ შეავსეთ ფორმა ვებ გვერდზე და დაგჭირდათ დამატებითი მითითებები, PopUP ფანჯარა მოგცემთ დამატებით ინფორმაციას ისე, რომ არ დაკარგოთ ფორმაში უკვე შეყვანილი მონაცემები. ამომხტარი რეკლამის ბლოკატორების უმეტესობა ამ ტიპის ჩამოტვირთვის საშუალებას იძლევა.

მაგრამ გაითვალისწინეთ, რომ ზოგიერთი ვებ ინსტალერი, როგორიცაა McAfee-ის მიერ გამოყენებული, პროგრამული უზრუნველყოფის დასაინსტალირებლად იყენებს ამომხტარ ფანჯარას. ბევრ ინტერნეტ ბრაუზერში Ctrl ღილაკის დაჭერით ბმულზე დაწკაპუნებისას ფილტრს გვერდის ავლით.

ამ შემთხვევაში, დაწკაპუნებამ (თუნდაც შემთხვევით) ერთ ამომხტარ ფანჯარაზე შეიძლება გამოიწვიოს სხვების გახსნა.

ბანერის რეკლამისა და ამომხტარი ფანჯრის კომბინაცია არის „ჰოვერ რეკლამა“, რომელიც იყენებს DHTML-ს ეკრანზე გვერდის შინაარსის ზემოთ გამოსაჩენად. JavaScript-ის გამოყენებით, რეკლამა შეიძლება გადაფაროს ვებ გვერდის თავზე გამჭვირვალე ფენაში. ეს რეკლამა შეიძლება გამოჩნდეს თითქმის ყველა შემთხვევაში, როდესაც რეკლამის განმთავსებელს სურს მისი გამოჩენა. ასეთი PopUP ფანჯრის სკრიპტი წინასწარ ვერ შეინიშნება. მაგალითად, რეკლამა შეიძლება შეიცავდეს AdobeFlash ანიმაციას, რომელიც დაკავშირებულია რეკლამის განმთავსებლის საიტთან. ის ასევე შეიძლება გამოიყურებოდეს როგორც ჩვეულებრივი ფანჯარა. ვინაიდან რეკლამები ვებ გვერდის ნაწილია, მათი დაბლოკვა შეუძლებელია ბლოკერის გამოყენებით, მაგრამ მათი გახსნის თავიდან აცილება შესაძლებელია მესამე მხარის აპლიკაციების გამოყენებით (როგორიცაა AdBlock და AdblockPlus) ან მორგებული სტილის ფურცლების გამოყენებით.

ეს რეკლამა ჩვეულებრივი PopUP ფანჯრის მსგავსია, მაგრამ ის დამალულია ბრაუზერის მთავარი ფანჯრის მიღმა, ვიდრე მის წინ. როდესაც pop-up რეკლამები ფართოდ გავრცელდა და დაიწყო მთელი კომპიუტერის ეკრანის დაკავება, ბევრმა მომხმარებელმა ისწავლა მათი დაუყონებლივ დახურვა. სწორედ ამიტომ გამოჩნდა PopUNDER, რომლებიც არ უშლიან ხელს მომხმარებლის მიერ საიტის კონტენტის ნახვას. ისინი, როგორც წესი, შეუმჩნეველი რჩება მანამ, სანამ ბრაუზერის მთავარი ფანჯარა არ დაიხურება ან მინიმუმამდე დაიხურება. კვლევამ აჩვენა, რომ მომხმარებლები უკეთესად რეაგირებენ ამ რეკლამებზე, ვიდრე ამომხტარი რეკლამები, რადგან ისინი არ გამოიყურებიან, როგორც ინტრუზიული.

რეკლამა იყენებს ორ ძალიან მარტივ JavaScript ფუნქციას, რომლებიც დაინერგა 1997 წელს Netscape 2.0B3 ბრაუზერთან ერთად. ეს მეთოდოლოგია ფართოდ გამოიყენება ინტერნეტში. თანამედროვე ვებ გამომცემლები და რეკლამის განმთავსებლები იყენებენ მას გვერდის კონტენტის წინ ფანჯრის შესაქმნელად, რეკლამის ჩატვირთვისთვის და შემდეგ ეკრანის მიღმა გაგზავნისთვის.

თანამედროვე ბრაუზერების უმეტესობა PopUP-ის ამომხტარი ფანჯრის გახსნის საშუალებას იძლევა მხოლოდ მაშინ, როდესაც არსებობს მომხმარებლის ურთიერთქმედება (როგორიცაა მაუსის დაწკაპუნება). ნებისმიერი არაინტერაქტიული ზარი (ტაიმერის გამოძახება, მოვლენების ჩატვირთვა და ა.შ.) გამოიწვევს ახალი ფანჯრის დაბლოკვას. ამ შეზღუდვის თავიდან ასაცილებლად, ამომხტარი რეკლამების უმეტესობა გააქტიურებულია მაუსის მოვლენის მსმენელის გამოყენებით, რომელიც დამაგრებულია პირდაპირ დოკუმენტზე ან დოკუმენტის სხეულზე. ეს საშუალებას გაძლევთ დაიჭიროთ მაუსის ყველა დაწკაპუნება გვერდზე, რომელიც არ იყო გამოყენებული სხვა მოვლენის დამმუშავებლების მიერ. მაგალითად, როდესაც მომხმარებელი ირჩევს ტექსტს, მაუსის დაწკაპუნება აღმოჩენილია დოკუმენტზე მიმაგრებული მსმენელის მიერ. ეს გაიხსნება ამომხტარი ფანჯარა ზემოთ მოცემული კოდის გამოყენებით.

სხვადასხვა ვებსაიტებისა და ვებ აპლიკაციების მომხმარებლები ბრაუზერის გამოყენებისას მუდმივად აწყდებიან არასასურველ ამომხტარ ფანჯარას. როგორც წესი, ასეთი PopUP ფანჯარა ამოღებულია "დახურვის" ან "გაუქმების" ფუნქციის გამოყენებით. ვინაიდან ეს არის ტიპიური მომხმარებლის პასუხი, დეველოპერებმა დაიწყეს გარკვეული ხრიკების გამოყენება. ამრიგად, სარეკლამო შეტყობინებების შემუშავებისას, ეკრანზე იქმნება ღილაკები ან კონტროლი, რომლებიც მსგავსია „დახურვის“ ან „გაუქმების“ ოფციის მსგავსი. თუმცა, როდესაც მომხმარებელი ირჩევს ამ ვარიანტებიდან ერთ-ერთს, ღილაკი ასრულებს მოულოდნელ ან არაავტორიზებულ მოქმედებას (მაგალითად, ახალი ამომხტარი ფანჯრის გახსნა ან მომხმარებლის სისტემაში არასასურველი ფაილის ჩამოტვირთვა).

იმის გამო, რომ ვებ დიზაინის ტექნოლოგიები ავტორებს საშუალებას აძლევს გამოიყენონ „ყალბი“ ნებისმიერი ფორმა, ზოგიერთი მომხმარებელი საერთოდ უარს ამბობს ამომხტარი ფანჯრის შიგნით რომელიმე ელემენტზე დაწკაპუნებაზე ან ურთიერთობაზე.

ზოგჯერ URL-ები გადამისამართებულია სარეკლამო გვერდებზე ფონის URL-ის გადამისამართების ფუნქციის გამოყენებით. ისინი ზოგჯერ იხსნება ახალ ჩანართში, შემდეგ კი ძველი ფონის ჩანართის შინაარსი იცვლება სარეკლამო გვერდებით გადამისამართების გამოყენებით. AdblockPlus, uBlock ან NoScript ვერ დაბლოკავს ამ pop-up გადამისამართებებს. ამ ფუნქციას სულ უფრო ხშირად იყენებენ სარეკლამო დისტრიბუტორები, რათა ეძებონ გზა, რათა PopUP ფანჯარა ყველაზე აქტიური გახდეს.

როგორ ამოიღოთ რეკლამები ბრაუზერში? უპირველეს ყოვლისა, შეამოწმეთ განახლებები. თქვენი ბრაუზერის განახლების შენარჩუნება დიდ გზას წაგართმევთ ამომხტარ ფანჯარასთან ბრძოლაში. ბრაუზერების უმეტესობა დაყენებულია ავტომატურად განახლებისთვის, მაგრამ ეს შეიძლება გამორთოთ. ეს პროცესი ჩვეულებრივ მხოლოდ რამდენიმე წუთს იღებს.

• Firefox: დააჭირეთ აპის სახელის ღილაკს ზედა მარცხენა კუთხეში. გადაიტანეთ მაუსი დახმარებაზე და აირჩიეთ Firefox-ის შესახებ. ეს გაიხსნება ფანჯარა ბრაუზერის ვერსიის ინფორმაციით. თუ თქვენი ბრაუზერი ავტომატურად არ ჩამოტვირთავს და არ დააინსტალირებს.
• Chrome: დააჭირეთ მენიუს ღილაკს ზედა მარჯვენა კუთხეში. აირჩიეთ „Chrome-ის შესახებ“ ბოლოში, გაიხსნება ახალი ჩანართი და ბრაუზერი შეამოწმებს განახლებებს. თუ არსებობს, ისინი ავტომატურად დაინსტალირდება.
• Internet Explorer: განახლების მეთოდი დამოკიდებულია ბრაუზერის ვერსიაზე, რომელსაც იყენებთ. ძველი ვარიანტებისთვის, თქვენ უნდა შეიყვანოთ Windows Update. Internet Explorer 10-ისა და 11-ისთვის შეგიძლიათ ჩართოთ ავტომატური განახლებები Gear-ის ხატულაზე დაწკაპუნებით და Internet Explorer-ის შესახებ არჩევით.

ზოგჯერ ვებსაიტების PopUP-ები და მსგავსი პროგრამული უზრუნველყოფა ზედმეტად ღრმად არის ჩასმული, რათა ამოღებულ იქნეს განახლებით. ასეთ შემთხვევებში, თქვენი ბრაუზერის ხელახლა ინსტალაცია ან შეცვლა შეიძლება დაგეხმაროთ პრობლემის მოგვარებაში.

პირველ რიგში, ჩამოტვირთეთ ბრაუზერის უახლესი ვერსია, რომლის გამოყენებაც გსურთ. თქვენ შეგიძლიათ იპოვოთ ჩამოტვირთვის ბმულები თითოეული აპლიკაციის მთავარ გვერდზე.

დღეს ჩვენ ვისაუბრებთ იმაზე, თუ როგორ შექმნათ თქვენი საკუთარი ამომხტარი ფანჯარა თქვენი ვებსაიტისთვის. ახლა ეს მეთოდი ძალიან პოპულარულია, მაგრამ მისი განხორციელების გადაწყვეტილებების უმეტესობა ფასიანია. არც თუ ისე ლამაზი ფანჯრის მაგალითი (მაგრამ ეს მხოლოდ მაგალითია) პოსტის შიგნით...

ამ პოსტში ჩვენ ვისწავლით თუ როგორ უნდა გავაკეთოთ ასეთი ამომხტარი ფანჯარა. მარტივი, სწრაფი, ეფექტური და რაც მთავარია უფასო!

ნებისმიერი ამომხტარი ფანჯარა არსებითად შედგება ორი ნაწილისგან. პირველი არის ზოგადი ფონის ჩაბნელება. მეორე არის თავად ფანჯარა. ფანჯარა, თავის მხრივ, ჩვეულებრივ იყოფა სათაურად, ტექსტად და გამოწერის ფორმად. მოდით მოვამზადოთ ბაზა ჩვენი ფანჯრისთვის, მითითებული სტრუქტურის გათვალისწინებით.

Ჩვენ გვაქვს:
fs_popup_bg — საიტის დაბინდვა;
fs_popup - თავად ფანჯარა;
fs_popup_head — ფანჯრის სათაური;
fs_content — ფანჯრის შინაარსი, დაყოფილია ორ ნაწილად;

ახლა დავწეროთ საჭირო სტილები...

#fs_popup_bg ( z-index:9999; მარცხნივ:0; ზედა:0; პოზიცია:ფიქსირებული; სიგანე:100%; სიმაღლე:100%; ფონი:rgba(0,0,0,0.9); ) #fs_popup ( ზღვარი: 10% 20%; კონტური: 5px მყარი #FF0000;

მოდით გადავხედოთ ჩვენი ამომხტარი ფანჯრის სტილებს.
#fs_popup_bg- მიუთითებს, რომ ჩვენი ფონი იქნება შავი და თითქმის გაუმჭვირვალე (0.9), განთავსდება ზედა მარცხენა კუთხეში და დაიკავებს ეკრანის მთელ არეალს. ამ შემთხვევაში, ელემენტის სიღრმე, უფრო სწორად მისი აწევა სხვა ელემენტებზე მაღლა, იქნება ძალიან დიდი (აუცილებლად მეტი ვიდრე სხვები).
#fs_popup- მიუთითებს, რომ ფანჯარა იქნება ფონზე მაღლა (წინააღმდეგ შემთხვევაში ვერ დავინახავთ). მისი ზომები იქნება 600px 300px მომრგვალებული კუთხეებით და წითელი საზღვრით.
.fs_content_left, .fs_content_right- გვეუბნება, რომ ბლოკები დაჭერილია მარცხნივ (აუცილებელია მათი მდებარეობისთვის იმავე დონეზე), მათ აქვთ ჩაღრმავები და Arial შრიფტი.

მოდით შევავსოთ ჩვენი ფანჯარა შინაარსით: