JQuery მოდალური ფანჯარა - რისთვის არის ის და როგორ დააინსტალიროთ

Სარჩევი:

JQuery მოდალური ფანჯარა - რისთვის არის ის და როგორ დააინსტალიროთ
JQuery მოდალური ფანჯარა - რისთვის არის ის და როგორ დააინსტალიროთ
Anonim

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

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

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

საჭიროა jquery მოდალური ფანჯარა კონტენტის საჩვენებლად, რომელიც შეესაბამება გვერდზე არსებულ ინფორმაციას და ავსებს მას.

jQuery - რა არის ეს?

სრული გაგებისთვის, თუ ვინმემ არ იცის, მაშინ jquery არის JavaScript ბიბლიოთეკა და ეს უკანასკნელი, თავის მხრივ, ნიშნავს კოდის ნაწილს, რომელიც ჩართულია ვებ გვერდის კოდში და საშუალებას გაძლევთ მიაღწიოთ სხვადასხვა ეფექტები, რომლებიც ვერ განხორციელდება HTML და CSS-ში. ასეთი კოდის ტიპიური მაგალითი იქნება გვერდზე ნაჩვენები მიმდინარე თარიღი ან დრო.

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

jquery-ს რომ უთხრათ, რომ გჭირდებათ ესა თუ ის ეფექტი, არის CSS ენა სტილის ფურცლებით.

CSS ენა

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

აქედან გამომდინარე, მოდალურ Windows-ში jquery და CSS თითქმის შეუცვლელი და შეუცვლელია. ამიტომ, თუ jquery არ შედის, ეს უნდა გააკეთოთ.

ამისთვის, სათაურის ტეგში ჩასმულია შემდეგი:

jQuery
jQuery

რისთვის არის მოდალები?

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

ამომხტარი ფანჯარა

jquery ამომხტარი ფანჯარა, რომელიც მხოლოდ ერთხელ გამოჩნდება გვერდზე, არის მოდალური ფანჯრების ვარიაცია.

მისი განსახორციელებლად, რამდენიმე ნაბიჯი უნდა გადაიდგას.

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

jQuery მოდალური ფანჯარა
jQuery მოდალური ფანჯარა

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

jQuery მარტივი მოდალური ფანჯარა
jQuery მარტივი მოდალური ფანჯარა

შემდეგ, დაკავშირებულია ქუქიების მოდული:

jQuery მოდალური ფანჯარა
jQuery მოდალური ფანჯარა

HTML კოდის დაწერა, რომელიც უზრუნველყოფს ინფორმაციას მომხმარებლისთვის:

jQuery მოდალური ფანჯარა
jQuery მოდალური ფანჯარა

კოდში მითითებული arctimonial-close კლასი ნიშნავს, რომ jQuery მოდალური ფანჯარა მასთან ერთად დაიხურება.

შემდეგ მოდის საბოლოო სკრიპტი:

jQuery ამომხტარი მოდალური
jQuery ამომხტარი მოდალური

გამოყენებული ზოგიერთი პარამეტრი ნიშნავს შემდეგს:

closeOnOverClick: განსაზღვრავს, იხურება თუ არა ფანჯარა გადაფარვის დაწკაპუნებისას.

CloseOn Esc: ნიშნავს Esc-ზე დაწკაპუნებას.

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

ისწავლეთ როგორ დააინსტალიროთ თქვენსjQuery მოდალური ფანჯარა საიტზე, საჭიროების შემთხვევაში შეგიძლიათ გადახვიდეთ უფრო რთულ ვარიანტებზე. ამისთვის ემატება მრავალფეროვანი CSS სტილი და ფანჯარა სრულიად განსხვავდება სხვა საიტების მოდალური ფანჯრებისგან.

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

მოდალური ფანჯრების ტიპები

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

გირჩევთ: