მოდალური ფანჯარა არის კონტეინერი, რომელიც ბმულზე დაწკაპუნებისას ჩნდება და იძლევა გარკვეულ ინფორმაციას. ვფიქრობ, ბევრი უკვე იცნობს მას, მაგრამ თუ არა, უყურეთ დემო ვერსიას, რომ გაიგოთ რა არის. ახლა მათი დიდი რაოდენობაა და თითოეული მუშაობს თავისებურად. მაგალითად, არის სრულიად სტანდარტულები, რომლებიც გთხოვენ რაიმე მოქმედების შესრულებას, ამ მაგალითის დადასტურებაში. ან, მაგალითად, სხვა ვარიანტი, როდესაც პირველად ეწვევით საიტს, რომელიც შესაბამისი იქნება სოციალურ ქსელებში ჯგუფების სხვადასხვა გამოწერისთვის. ქსელში არის მოდალური ფანჯრები CSSკარგი, მე მსურს ამ წილის აღება JavaScript, რადგან ის უფრო საინტერესოს ხდის და კარგად მუშაობს ყველა ბრაუზერში.
ᲞᲘᲠᲕᲔᲚᲘ ᲜᲐᲑᲘᲯᲘ. JavaScript კოდი.
მოდალური ფანჯრის გასაშვებად, თქვენ უნდა გადასცეთ მნიშვნელობა ფუნქციას ფანჯარა.ჩატვირთვა. რომელშიც ჩვენ გადავცემთ ორ საიდენტიფიკაციო ელემენტს " ა"და" ბ".
//ელემენტების გავლა id "a" და "b" window.onload = ფუნქცია() (a = document.getElementById("a"); b = document.getElementById("b"); )
შემდეგ ჩვენ ვწერთ ფუნქციას " შოუ ა", რომელიც აჩვენებს მოდალურ ფანჯარას და გადადის ელემენტებზე" ა"და" ბ"სტილები, კერძოდ, ჩვენ ვაყენებთ ფანჯრის გამჭვირვალობას, სიგანეს და დაბლოკვას, თუ ბმულს არ დააკლიკეთ" გახსნა".
//აჩვენეთ ფუნქციის "showA" ფუნქციის ფანჯარა showA() ( //დააყენეთ გამჭვირვალობა და დაბლოკეთ ჩვენება // ელემენტის "b" b.style.filter = "alpha(opacity=80)"; b.style. გამჭვირვალობა = 0,8; b .style.display = "ბლოკი"; // დააყენეთ ბლოკირების და ზედა ბალიშის 200 პიქსელზე // "a" ელემენტის a.style.display = "ბლოკი"; a.style.top = "200px" ";)
მოდალური ფანჯრის გახსნის შემდეგ, ჩვენ უნდა დავხუროთ ან დავმალოთ იგი მოგვიანებით, ამისათვის ჩვენ ვწერთ ფუნქციას " დამალვა A"რომელიც დამალავს მოდალურ ფანჯარას და მიანიჭებს მას სტილებს ელემენტებისთვის" ა"და" ბ".
//დაუძახით ფუნქციას "hideA", რომელიც დამალავს //ფანჯარას ელემენტების "a" და "b" ფუნქცია hideA() ( b.style.display = "none"; a.style.display = "none"; )
სრული კოდი.
//ელემენტების გავლა id "a" და "b" window.onload = ფუნქცია() ( a = document.getElementById("a"); b = document.getElementById("b"); ) //ფუნქციის ფანჯრის ჩვენება " showA" ფუნქცია showA() ( //დააყენეთ გამჭვირვალობა და დაბლოკეთ ჩვენება // ელემენტის "b" b.style.filter = "alpha(opacity=80)"; b.style.opacity = 0.8; b.style. ეკრანი = "ბლოკი"; // დააყენეთ ბლოკირების და ზედა ზღვარი 200 პიქსელზე // "a" ელემენტის a.style.display = "ბლოკი"; a.style.top = "200px"; ) //გამოძახება " hideA" ფუნქცია, რომელიც დამალავს //ფანჯარას ელემენტებისთვის "a" და "b" ფუნქცია hideA() (b.style.display = "none"; a.style.display = "none"; )
ნაბიჯი მეორე. HTML კოდი.
გახსენით
ტეგში "div"მიუთითეთ იდენტიფიკატორი " ა“, რომელიც ურთიერთქმედებს სტილებთან CSSდა კოდით JavaScript. შემდეგ ჩვენ დავამატებთ სხვა ტეგს " დივ"და მიეცი მას იდენტიფიკატორი" ფანჯრები", რომელიც იმოქმედებს როგორც მარკირება მოდალური ფანჯრის კონტეინერში.
შიგნით ჩვენ აღვნიშნავთ ბმულს, რომელიც იქნება " დახურვა"მოდალური ფანჯარა, ასევე მიეცით მას სტილი" გვერდები"და მიეცით ნაგულისხმევი სტილი" ათწილადი: მარჯვნივ", ანუ ჩვენ გამოვაჩენთ ბმულს ზედა მარჯვენა კუთხეში მოდალური ფანჯრის დახურვისთვის.
დახურვა
ჩვენ ვარეგისტრირებთ იდენტიფიკატორს " ბ", რომელიც დამალავს ფანჯარას.
სრული კოდი.
Გაღება დაკეტვა
ნაბიჯი სამი. CSS კოდი.
საჭირო სტილები CSS, რომლის გარეშეც მოდალური ფანჯარა არ იმუშავებს სწორად, უფრო სწორად, საერთოდ არ იმუშავებს ან არ აჩვენებს ინფორმაციას სწორად.
ასე რომ, პირველი საჭირო სტილი პოზიციასთან დაკავშირებით, ამ მაგალითში არის დაფიქსირდა. ის საშუალებას გაძლევთ აჩვენოთ მოდალური ფანჯარა, მაგრამ მაინც შეზღუდოთ იგი შევსების საზღვრებით. Გამოყენებით z-ინდექსიჩვენ ვაზუსტებთ, რამდენად იდენტიფიცირებულია მოდალური ფანჯარა ბმულზე დაწკაპუნების შემდეგ" გახსნა", და " დახურვა“. ასევე ჩვენება: არცერთი, რომელიც საშუალებას გაძლევთ დამალოთ მოდალური ფანჯარა ბმულზე დაწკაპუნებამდე.
#b (პოზიცია: დაფიქსირებული; ზედა: 0; მარცხნივ: 0; მარჯვნივ: 0; ქვედა: 0; ჩვენება: არცერთი; ფონი: ნაცრისფერი; z-ინდექსი: 1; ) #a ( საზღვარი: 1px მყარი შავი; პოზიცია: ფიქსირებული ; ფონი: #eff7ff; z-index:3; ჩვენება: არცერთი; ) #windows ( padding: 5px; სიგანე: 500px; სიმაღლე: 300px; საზღვარი: 2px მყარი ლურჯი; ) a.pages (ფონი: #97cdff; ფერი: თეთრი; padding: 4px; ტექსტის დეკორაცია: არცერთი; ) a:hover.pages (ფონი: წითელი; ფერი: თეთრი; padding: 4px; ტექსტის დეკორაცია: არცერთი; )
ყველას დიდი მადლობა ყურადღებისთვის!
3. jQuery მოდალური ფანჯრის მაგალითი, რომელიც გამოძახებულია ბმულიდან (დემოდან)
სავარაუდოდ, თქვენ უკვე გინახავთ ამომხტარი მოდალური ფანჯარა ინტერნეტში არაერთხელ - რეგისტრაციის დადასტურება, გაფრთხილება, საცნობარო ინფორმაცია, ფაილის ჩამოტვირთვა და მრავალი სხვა. ამ გაკვეთილში მე შემოგთავაზებთ რამდენიმე მაგალითს, თუ როგორ შევქმნათ უმარტივესი მოდალური ფანჯრები.
მარტივი ამომხტარი მოდალური ფანჯრის შექმნა მოდით დავიწყოთ მარტივი მოდალური ფანჯრის კოდის ყურება, რომელიც მაშინვე გამოჩნდებაjQuery კოდი
$(დოკუმენტი).ready(function()
{
alert ("ტექსტი pop-up ფანჯარაში");
});
ჩასვით კოდი თქვენი გვერდის არსად. გვერდის ჩატვირთვისთანავე, ყოველგვარი ბრძანებების გარეშე, ნახავთ ფანჯარას, რომელიც ასე გამოიყურება:
მაგრამ შემდეგი კოდი შესრულდება ბრაუზერში მთელი გვერდის ჩატვირთვის შემდეგ. ჩვენს მაგალითში, გვერდის სურათებით ჩატვირთვის შემდეგ, გამოჩნდება მარტივი ამომხტარი ფანჯარა:
$(window).load(function()
{
alert ("გვერდი დასრულდა ჩატვირთვა!)");
});
ხშირად შეგიძლიათ ნახოთ, რომ შესვლისა და რეგისტრაციის ფორმები განთავსებულია ასეთ ფანჯრებში. მოდი საქმეს მივუდგეთ
ჯერ დავწეროთ html ნაწილი. ჩვენ ვათავსებთ ამ კოდს თქვენი დოკუმენტის სხეულში.
მოდალური ფანჯრის გამოძახება
მოდალური ფანჯრის ტექსტი
დახურვა
ტექსტი მოდალურ ფანჯარაში.
CSS კოდი. ან ცალკე css ფაილში, ან თავში.
სხეული (
font-family:verdana;
შრიფტის ზომა:15px;
}
.ბმული (ფერი:#fff; ტექსტი-დეკორაცია:არცერთი)
.link:hover (ფერი:#fff; ტექსტის დეკორაცია:ხაზი)
#ნიღაბი (
პოზიცია:აბსოლუტური;
მარცხენა: 0;
ზედა: 0;
z-ინდექსი:9000;
ფონის ფერი:#000;
ჩვენება: არცერთი;
}
#boxes.window (
პოზიცია:აბსოლუტური;
მარცხენა: 0;
ზედა: 0px;
ზედა: 40 პიქსელი;
სიგანე:440px;
სიმაღლე: 200px;
ჩვენება: არცერთი;
z-ინდექსი:9999;
padding: 20px;
overflow: დამალული;
}
#ყუთები #დიალოგი (
სიგანე: 375px;
სიმაღლე: 203 px;
padding: 10px;
ფონის ფერი:#ffffff;
}
.ზემო (
პოზიცია:აბსოლუტური;
მარცხენა: 0;
ზედა: 0;
სიგანე: 370px;
სიმაღლე: 30px;
ფონი: #0085cc;
padding: 8px 20px 6px 10px;
}
.დახურვა(
float:right;
}
.შინაარსი(
padding-top: 35px;
}
jQuery კოდში ჩვენ ყურადღებას გავამახვილებთ მოდალური ფანჯრისა და ნიღბის პოზიციაზე, ჩვენს შემთხვევაში ფონის თანდათანობით ჩაბნელებაზე.
ყურადღება! არ დაგავიწყდეთ ბიბლიოთეკის ჩასმა დოკუმენტის თავში!
ბიბლიოთეკის დაკავშირება Google ვებსაიტიდან. კარგად, თავად jQuery კოდი.
jQuery კოდი
$(დოკუმენტი).ready(function() (
$("a").click(function(e) (
e.preventDefault();
var id = $(this).attr("href");
var maskHeight = $(დოკუმენტი).სიმაღლე();
var maskWidth = $(ფანჯარა).width();
$("#mask").css(("სიგანე":maskWidth,"სიმაღლე":maskHeight));
$("#ნიღაბი").fadeIn(1000);
$("#ნიღაბი").fadeTo("ნელი",0.8);
var winH = $(ფანჯარა).სიმაღლე();
var winW = $(ფანჯარა).width();
$(id).css("top", winH/2-$(id).height()/2);
$(id).css("მარცხნივ", winW/2-$(id).width()/2);
$(id).fadeIn(2000);
});
$(".ფანჯარა .დახურვა").დააწკაპუნეთ(ფუნქცია (e) (
e.preventDefault();
$("#mask, .window").hide();
});
$("#mask"). დააწკაპუნეთ (ფუნქცია () (
$(this).hide();
$(".ფანჯარა").დამალვა();
});
});
მოდალები, გადაფარვები, დიალოგები, რასაც არ უნდა უწოდოთ მათ, დროა გადახედოთ ამ ინტერფეისის შაბლონს. როდესაც ისინი პირველად გამოვიდნენ სცენაზე, მოდალები იყო მომხმარებლის ინტერფეისის პრობლემის ელეგანტური გადაწყვეტა. პირველ რიგში, ისინი ამარტივებს მომხმარებლის ინტერფეისს. მეორეც, ეკრანის სივრცის დაზოგვა. მას შემდეგ დიზაინერებმა ადვილად აითვისეს მოდალები და ზოგიერთმა მათ უკიდურესობამდე მიიყვანა. მოდალები გახდა საშინელი ამომხტარი ფანჯრის დღევანდელი ვერსია. მომხმარებლებს მოდალური ფანჯრები შემაწუხებლად მიაჩნიათ და ისწავლეს მათი ინსტინქტურად და ავტომატურად დახურვა.
განმარტება:მოდალური ფანჯარა არის ელემენტი, რომელიც ზის ძირითადი პროგრამის ფანჯრის თავზე. ის ბლოკავს მთავარ ფანჯარას, მაგრამ ხილულს ტოვებს ბავშვის მოდალური ფანჯრის უკან. მომხმარებლებმა უნდა იმოქმედონ მოდალურ ფანჯარასთან, სანამ შეძლებენ მშობელ აპლიკაციაში დაბრუნებას. - ვიკიპედია
გამოყენებათქვენ შეგიძლიათ გამოიყენოთ მოდალური ფანჯარა, როცა დაგჭირდებათ:
მიიპყრო მომხმარებლის ყურადღებაგამოიყენეთ, როდესაც გსურთ შეწყვიტოთ მომხმარებლის მიმდინარე დავალება, რათა მისი ყურადღება მიიპყროთ რაიმე უფრო მნიშვნელოვანზე.
მოითხოვს მომხმარებლის შეყვანასგამოიყენეთ, როდესაც გსურთ მიიღოთ ინფორმაცია მომხმარებლისგან. მაგალითად, რეგისტრაციისა და ავტორიზაციის ფორმა.
დამატებითი ინფორმაციის ჩვენება კონტექსტშიგამოიყენეთ, თუ გსურთ დამატებითი ინფორმაციის ჩვენება მშობელი გვერდის კონტექსტის დაკარგვის გარეშე. მაგალითად, უფრო დიდი სურათების ან ვიდეოების ჩვენება.
დამატებითი ინფორმაციის ჩვენება (კონტექსტიდან მიღმა)გამოიყენეთ, როდესაც გსურთ აჩვენოთ ინფორმაცია, რომელიც პირდაპირ არ არის დაკავშირებული მშობელ გვერდზე ან სხვა გვერდებისგან „დამოუკიდებელ“ პარამეტრებთან. მაგალითად, შეტყობინებები.
შენიშვნა: არ გამოიყენოთ მოდალები შეცდომის შეტყობინებების, დავალების წარმატების ან გამაფრთხილებელი შეტყობინებების საჩვენებლად. დატოვე ისინი გვერდზე.
მოდალური ფანჯრის ანატომიაცუდად განხორციელებულმა გადაფარვამ შეიძლება ხელი შეუშალოს დავალების შესრულებას. იმის უზრუნველსაყოფად, რომ თქვენი მოდალური ფანჯარა არ აწუხებს მომხმარებლებს, გაითვალისწინეთ შემდეგი:
1.გაქცევის ლუქიმიეცით მომხმარებლებს თავის დაღწევის საშუალება მოდალური ფანჯრის დახურვის გზით. ამის მიღწევა შესაძლებელია შემდეგი გზებით:
- გაუქმების ღილაკი
- დახურვის ღილაკი
- გაქცევის გასაღები
- დააწკაპუნეთ ფანჯრის გარეთ
წვდომის მინიშნება: ყველა მოდალურ ფანჯარას უნდა ჰქონდეს კლავიატურის ხელმისაწვდომობის კონტროლი ფანჯრის დახურვისთვის. მაგალითად, გაქცევის გასაღები უნდა დახუროს ფანჯარა.
2. სათაურიმიეცით მომხმარებლის კონტექსტი მოდალური სათაურით. ეს საშუალებას აძლევს მომხმარებლებს იცოდნენ სად არის ის, რადგან მათ არ დატოვეს ორიგინალური გვერდი.
Tweet ღილაკზე — მოდალური სათაური: შექმენით ახალი ტვიტი. იძლევა კონტექსტს. რჩევა: ღილაკის ეტიკეტი (რომელიც იწყებს მოდალური ფანჯარას) და მოდალური სათაური უნდა ემთხვეოდეს
3. ღილაკიღილაკების ეტიკეტები უნდა შეიცავდეს მკაფიო სახელებს. ეს ეხება ნებისმიერ ღილაკს. მოდალური ფანჯრებისთვის, ღილაკი "დახურვა" უნდა იყოს წარმოდგენილი როგორც "დახურვის" ღილაკის ხატულა ან "x".
Invision-ს აქვს მკაფიო ღილაკის ხატები შენიშვნა: არ გახადოთ ღილაკის ხატულა დამაბნეველი. თუ მომხმარებელი ცდის მოქმედების გაუქმებას და მოდალური ფანჯარა გამოჩნდება სხვა გაუქმების ღილაკით, წარმოიქმნება დაბნეულობა. „ვაუქმებ თუ არა გაუქმებას? ან გავაგრძელო?”
4. ზომისა და ადგილმდებარეობის განსაზღვრამოდალური ფანჯარა არ უნდა იყოს ძალიან დიდი ან ძალიან პატარა, თქვენ უბრალოდ გსურთ რომ იყოს სწორი ზომა. მიზანია კონტექსტის შენარჩუნება, ამიტომ მოდალური ფანჯარა არ უნდა დაიკავოს მთელი ეკრანი. შინაარსი უნდა შეესაბამებოდეს მოდელის ფანჯარას. თუ საჭიროა გადახვევის ზოლი, შეგიძლიათ შექმნათ ახალი გვერდი.
- მდებარეობა არის ეკრანის ზედა ნაწილში, რადგან მობილური ხედში მოდალური ფანჯარა შეიძლება დაიკარგოს, თუ მას ქვემოთ მოათავსებთ.
- ზომა — არ გამოიყენოთ მოდელის ფანჯრის ეკრანის 50%-ზე მეტი.
მოდალური ფანჯრის გახსნისას გამოიყენეთ ლაითბოქსის ეფექტი (დაბნელეთ ფონი). ეს ყურადღებას ამახვილებს მოდალურ ფანჯარაზე და მიუთითებს, რომ მომხმარებელს არ შეუძლია ურთიერთობა მშობელ გვერდზე.
წვდომის მინიშნება: დააყენეთ კლავიატურის ფოკუსი მოდალურ ფანჯარაზე.
6. მომხმარებელი უშვებს მოდალურ ფანჯარასნუ გააკვირვებთ მომხმარებლებს pop-up მოდალური ფანჯრით. ნება მიეცით მომხმარებლის მოქმედებას, როგორიცაა ღილაკზე დაწკაპუნება, ბმულის მიდევნება ან ოფციის არჩევა, მოდალური ფანჯრის ამოქმედებას. მოდალურმა ფანჯრებმა, რომლებიც თავისთავად იხსნება, შეიძლება მომხმარებლის გაოცება და მათი სწრაფად დახურვა გამოიწვიოს.
მოდალური ფანჯარა, რომელიც გამოწვეულია შესვლის ღილაკზე დაჭერით მოდალური ფანჯრები მობილურ მოწყობილობებში მოდალები და მობილური მოწყობილობები, როგორც წესი, კარგად არ მუშაობენ ერთად. შინაარსის ნახვა რთულია, რადგან მოდალები ძალიან დიდია, ძალიან დიდ ეკრანზე უძრავ ქონებას იკავებს ან ძალიან მცირეა. დაამატეთ ელემენტები, როგორიცაა მოწყობილობის კლავიატურა და ჩასმული გადახვევის ზოლები. მომხმარებლებს შეუძლიათ მხოლოდ თითების მოძრაობა და მასშტაბირება, მოდალური ფანჯრის ველის დაჭერას. მოდალური ფანჯრების უკეთესი ალტერნატივები არსებობს, ამიტომ ისინი არ უნდა იქნას გამოყენებული მობილურ მოწყობილობებზე.
კარგად შექმნილი მოდალური ფანჯარა — ფეისბუქის ხელმისაწვდომობა 
მოდალური ფანჯრების შექმნისას არ დაგავიწყდეთ კლავიატურის ხელმისაწვდომ კონტროლერების დამატება. განიხილეთ შემდეგი:
მოდალური ფანჯრის გახსნა — ელემენტი, რომელიც იძახებს დიალოგურ ფანჯარას, ხელმისაწვდომი უნდა იყოს კლავიატურიდან.
ფოკუსის გადატანა დიალოგურ ფანჯარაში — როდესაც მოდალური ფანჯარა ღიაა, კლავიატურის ფოკუსი უნდა გადაიტანოთ დასაწყისში.
კლავიატურის ფოკუსის კონტროლი — როდესაც ფოკუსი გადადის დიალოგურ ფანჯარაში, ის უნდა იყოს „ჩაკეტილი“ მის შიგნით, სანამ დიალოგური ფანჯარა არ დაიხურება.
დიალოგის დახურვა — ყველა მოდალურ ფანჯარას უნდა ჰქონდეს ხელმისაწვდომი კლავიატურის კონტროლი ამ ფანჯრის დასახურად.
არიაAccessible Rich Internet Applications (ARIA) სტანდარტი განსაზღვრავს გზებს ვებ-შიგთავსისა და ვებ აპლიკაციების ხელმისაწვდომობის გასაუმჯობესებლად.
შემდეგი ARIA ტეგები შეიძლება სასარგებლო იყოს ხელმისაწვდომი მოდალური ფანჯრის შექმნისას: როლი = „დიალოგი“, aria - დამალული, aria - ლეიბლი
ასევე, გაითვალისწინეთ დაბალი ხედვის მქონე მომხმარებლები. მათ შეუძლიათ გამოიყენონ ეკრანის გამადიდებლები მონიტორებზე ეკრანის შინაარსის გასადიდებლად. გადიდების შემდეგ მომხმარებელს შეუძლია ეკრანის მხოლოდ ნაწილის დანახვა. ამ შემთხვევაში, მოდალური ფანჯრები გამოჩნდება ისევე, როგორც მობილური მოწყობილობებზე.
დასკვნათუ ადამიანებმა ისწავლეს მოდალური ფანჯრების ავტომატურად დახურვის მცდელობა, რატომ გსურთ მათი გამოყენება?
მომხმარებლის ყურადღების მიპყრობა, კონტექსტის შენარჩუნება და მომხმარებლის ინტერფეისის გამარტივება მოდალური ფანჯრების დიდი უპირატესობაა. თუმცა, მათ ასევე აქვთ უარყოფითი მხარეები, რადგან ისინი წყვეტენ მომხმარებლის გამოცდილებას და შეუძლებელს ხდიან მშობელ გვერდზე ინტერაქციას კონტენტის დამალვით მოდალური ფანჯრის მიღმა. მოდალური ფანჯარა შეიძლება ყოველთვის არ იყოს პასუხი. არჩევისას გაითვალისწინეთ შემდეგი:
საკონტროლო სია
- როდის ვაჩვენებთ მოდალურ ფანჯრებს?
- როგორ ვაჩვენოთ მოდალური ფანჯრები?
- როგორ გამოიყურება მოდალური ფანჯრები?
- რა ინფორმაციას ვაწვდით და ვაგროვებთ?
არსებობს ალტერნატიული ინტერფეისის კომპონენტი მოდალური ფანჯრებისთვის: არამოდალური ან ცნობილი როგორც სადღეგრძელო (ტერმინი, რომელსაც იყენებენ Microsoft-ი და Google Material Design-ში). წაიკითხეთ ჩემი შემდეგი პოსტი მეტის გასაგებად.
მოდალური ფანჯრები არის ხშირად გამოყენებული ინსტრუმენტი ვებმასტერის არსენალში. ის ძალიან კარგად არის შესაფერისი დიდი რაოდენობის ამოცანების გადასაჭრელად, როგორიცაა სარეგისტრაციო ფორმების ჩვენება, სარეკლამო ბლოკები, შეტყობინებები და ა.შ.
მაგრამ, პროექტის საინფორმაციო მხარდაჭერაში მათი მნიშვნელოვანი ადგილის მიუხედავად, მოდალური ფანჯრები ჩვეულებრივ დანერგილია JavaScript-ში, რამაც შეიძლება შექმნას პრობლემები ფუნქციონირების გაფართოებისას ან უკანა თავსებადობის უზრუნველყოფისას.
HTML5 და CSS3 წარმოუდგენლად აადვილებს მოდალური ფანჯრების შექმნას.
HTML მარკირებაპირველი ნაბიჯი მოდალური ფანჯრის შესაქმნელად არის მარტივი და ეფექტური მარკირება:
გახსენით მოდალური ფანჯარა
div ელემენტის შიგნით მოდალური ფანჯრის შინაარსი მოთავსებულია. თქვენ ასევე უნდა მიაწოდოთ ბმული ფანჯრის დახურვისთვის. მაგალითად, მოვათავსოთ მარტივი სათაური და რამდენიმე აბზაცი. ჩვენი მაგალითის სრული მარკირება ასე გამოიყურება:
გახსენით მოდალური ფანჯარა X მოდალური ფანჯარა
მარტივი მოდალური ფანჯრის მაგალითი, რომელიც შეიძლება შეიქმნას CSS3-ის გამოყენებით.
მისი გამოყენება შესაძლებელია ფართო სპექტრში, შეტყობინებების ჩვენებიდან დაწყებული ფორმების რეგისტრაციამდე.
სტილებიშექმენით კლასი მოდალური დიალოგიდა დაიწყეთ გარეგნობის ფორმირება:
ModalDialog (პოზიცია: ფიქსირებული; შრიფტი-ოჯახი: Arial, Helvetica, sans-serif; ზედა: 0; მარჯვნივ: 0; ქვედა: 0; მარცხნივ: 0; ფონი: rgba (0,0,0,0.8); z-ინდექსი : 99999; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; ჩვენება: არცერთი; მაჩვენებელი-მოვლენები: არცერთი; )
ჩვენს ფანჯარას ექნება ფიქსირებული პოზიცია, ანუ ის გადავა ქვევით, თუ გადაატრიალებთ გვერდს ღია ფანჯრით. ასევე, ჩვენი შავი ფონი გაფართოვდება მთელი ეკრანის შესავსებად.
ფონს ექნება მცირე გამჭვირვალობა და ასევე განთავსდება ყველა სხვა ელემენტის თავზე ქონების გამოყენების გზით z-ინდექსი.
და ბოლოს, ჩვენ ვაყენებთ გადასვლებს ჩვენი მოდალური ფანჯრის ჩვენებისთვის და ვმალავთ მას არააქტიურ მდგომარეობაში.
იქნებ არ იცნობთ ქონებას პოინტერ-მოვლენები, მაგრამ ის საშუალებას გაძლევთ აკონტროლოთ, როგორ რეაგირებენ ელემენტები მაუსის დაწკაპუნებებზე. ჩვენ დავაყენეთ მნიშვნელობა მის მნიშვნელობაზე კლასისთვის მოდალური დიალოგი, ვინაიდან ბმული არ უნდა პასუხობდეს მაუსის დაწკაპუნებებს, როდესაც ფსევდო კლასი აქტიურია ": სამიზნე".
ახლა ჩვენ დავამატებთ ფსევდო კლასს : სამიზნედა მოდალური ფანჯრის სტილები.
ModalDialog:target ( ჩვენება: ბლოკი; მაჩვენებლის მოვლენები: ავტომატური; ) .modalDialog > div ( სიგანე: 400px; პოზიცია: ფარდობითი; ზღვარი: 10% ავტო; padding: 5px 20px 13px 20px; საზღვრის რადიუსი: 10px; ფონი: # ფონი: -moz-წრფივი-გრადიენტი(#fff, #999); ფონი: -webkit-წრფივი-გრადიენტი(#fff, #999); ფონი: -o-წრფივი-გრადიენტი(#fff, #999); )
ფსევდო კლასი სამიზნეცვლის ელემენტის ჩვენების რეჟიმს, ასე რომ, ჩვენი მოდალური ფანჯარა გამოჩნდება ბმულზე დაწკაპუნებისას. ჩვენ ასევე ვცვლით ქონების ღირებულებას პოინტერ-მოვლენები.
ჩვენ განვსაზღვრავთ მოდალური ფანჯრის სიგანეს და პოზიციას გვერდზე. ჩვენ ასევე განვსაზღვრავთ გრადიენტს ფონის და მომრგვალებული კუთხეებისთვის.
ფანჯრის დახურვაახლა ჩვენ უნდა განვახორციელოთ ფანჯრის დახურვის ფუნქცია. ღილაკის გარეგნობის ფორმირება:
დახურვა (ფონი: #606061; ფერი: #FFFFFF; ხაზის სიმაღლე: 25 პიქსელი; პოზიცია: აბსოლუტური; მარჯვნივ: -12 პიქსელი; ტექსტის გასწორება: ცენტრში; ზედა: -10 პიქსელი; სიგანე: 24 პიქსელი; ტექსტის დეკორაცია: არცერთი; შრიფტი- წონა: თამამი; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px1p 3px #000; box-shadow: 1px 1px 3px #000; ) .close:hover (ფონი: #00d9ff; )
ჩვენი ღილაკისთვის ჩვენ ვაყენებთ ფონის და ტექსტის პოზიციას. შემდეგ ვდებთ ღილაკს, ვაქცევთ მას მრგვალ ჩარჩოს დამრგვალების თვისების გამოყენებით და ვქმნით ღია ჩრდილს. როდესაც მაუსის ღილაკზე დააწებებთ, ჩვენ შევცვლით ფონის ფერს.
სტატიაში CSS-ის გამოყენებით მოდალური ფანჯრის შექმნის შესახებ, ჩვენ გადავხედეთ რა არის მოდალური ფანჯარა და რატომ არის საჭირო. ჩვენ ასევე შევქმენით ფანჯარა მხოლოდ css-ის გამოყენებით. ამ სტატიაში მე აღვწერ, თუ როგორ შევქმნათ javascript მოდალური ფანჯარა. უფრო კონკრეტულად, ჩვენ გამოვიყენებთ jquery ბიბლიოთეკას შესაქმნელად.
ასე რომ, დავიწყოთ მოდალური ფანჯრის შექმნა jquery-ში. პრობლემის გასართულებლად, მოდით დავაყენოთ შემდეგი პირობა. ჩვენ უნდა შევქმნათ საპასუხო მოდალური ფანჯარა. და ადაპტირება შედგება იმაში, რომ როდესაც ეკრანის ზომა მცირდება, ფანჯარაც შემცირდება. დავიწყოთ ადაპტური jquery მოდალური ფანჯრის შექმნა html მარკირებით.
Დააკლიკე აქ! X მოითხოვეთ ზარი
მე ვფიქრობ, რომ კოდით ყველაფერი ნათელია. ჩვენ გვაქვს wrapper.wrapper, სადაც განთავსებულია ჩვენი საიტის შინაარსი. არის ღილაკი მოდალური ფანჯრის გამოძახებისთვის id gowindow-ით, თავად ფანჯრის id modal_window და გადაფარვის ფენის myoverlay. ახლა დავწეროთ css სტილები.
შეფუთვა ( სიგანე: 100%; ზღვარი: ავტომატური; სიგანე: ავტომატური;/*იგივე 100%*/ მაქსიმალური სიგანე: 960 პიქსელი;/*სახვევის მაქსიმალური სიგანე*/ კონტური: 1px მყარი #000; ფონის ფერი: # F5F9FB; ) .button( /*-------*/ ) #modal_window (სიგანე: 34%;/*პასუხობისთვის*/ სიმაღლე: 300px; საზღვრის რადიუსი: 10px; საზღვარი: 3px #fff მყარი; ფონი: # e0e0e0; ზღვარი ზედა: -30%; ზღვარი მარცხნივ: 33%; ეკრანი: არცერთი; გაუმჭვირვალობა: 0; /*სრული გამჭვირვალობა ანიმაციისთვის */ z-ინდექსი: 5000; /*ფანჯარა უნდა იყოს ზედა ფენა*/ შიგთავსი -ზემო: 20 პიქსელი; ტექსტის გასწორება: ცენტრში; პოზიცია: შედარებითი; ) #მოდალური_ფანჯარა #ფანჯრის_დახურვა ( სიგანე: 21 პიქსელი; სიმაღლე: 21 პიქსელი; პოზიცია: აბსოლუტური; ზედა: 10 პიქსელი; მარჯვნივ: 10 პიქსელი; კურსორი: მაჩვენებელი; ჩვენება: ბლოკი; ) #myoverlay ( z-ინდექსი: 3000; /*ყველა ფენის ზემოთ, მაგრამ ფანჯრის ქვემოთ */ პოზიცია: დაფიქსირდა; /*საიტის გადახურვისთვის*/ ფონის ფერი: #000; გამჭვირვალობა: 0.5; სიგანე: 100%; სიმაღლე: 100%; /*სრულ ეკრანზე */ ზედა: 0; მარცხნივ: 0; კურსორი: მაჩვენებელი; ჩვენება: არცერთი;)
მოდით აღვწეროთ css კოდი. ჩვენ დავაყენეთ block.wrapper ადაპტირებად, ის იცვლება ეკრანის ზომის მიხედვით, მაგრამ არაუმეტეს 960 პიქსელი. მე არ ვაჩვენებ ღილაკის კოდს. ჩვენ ვადგენთ #modal_window ფანჯრის სიგანეს პროცენტულად, სიგანე დამოკიდებული იქნება .wrapper-ის სიგანეზე. ფანჯრის ცენტრისთვის დააყენეთ ზღვარი 33%. გამოითვლება 50%-17%, სადაც 17% არის ფანჯრის სიგანის ნახევარი. ჩვენ ვმალავთ ფანჯარას თვისებების ჩვენებით: none და გამჭვირვალობა: 0. კოდით #window_close და #myoverlay მგონი ყველაფერი გასაგებია. მოდით ახლა დავწეროთ jquery კოდი. ჩვენ ვივარაუდებთ, რომ jqery უკვე დაკავშირებულია.
$(document).ready(function() ( $("#gowindow").click(function())(//დააწკაპუნეთ ღილაკზე $("#myoverlay").fadeIn(400, //გადაფარვის ფენის ჩვენება function() ($("#modal_window") .css("ჩვენება", "ბლოკი") //გახადე ფანჯარა ხილვად.animate((გაუმჭვირვალობა: 1, ზედა: "50%"), 200); //გადიდება გამჭვირვალობა, ფანჯარა გლუვი გამოდის )); )); /* ამოიღეთ ფანჯარა */ $("#window_close, #myoverlay"). დააწკაპუნეთ(function())( //დააწკაპუნეთ გადახურვის ფენაზე ან გადაკვეთეთ $ ("#modal_window") .animate((გაუმჭვირვალობა : 0, ზევით: "45%"), 200, //გამჭვირვალობა ჩართულია, ფანჯარა აწვება ფუნქცია())( $(this).css("display", "არცერთი"); //გახადე ფანჯარა უხილავი $("# myoverlay").fadeOut(400); //გადახურვის ფენის ამოღება )); )); ));
მე ვფიქრობ, რომ Js კოდს არანაირი ახსნა არ სჭირდება, რადგან მე მას საკმაოდ კარგად გამოვთქვი კომენტარი. სულ ეს არის, რაც მე ვფიქრობ, მოდით შევაჯამოთ. ჩვენ შევქმენით მარტივი jquery საპასუხო მოდალური ფანჯარა
