, შიგნით გარკვეული შინაარსით და ღილაკით "დახურვა", გენერირებული ექსკლუზიურად css- ის საშუალებით.

ფანჯრის გახსნა 1 ფანჯრის გახსნა 2 ვიდეო ფანჯარაში 3 ფოტო ფანჯარაში 4

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

ნაბიჯი 2. CSS

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

/ * ძირითადი გათიშვისა და მოდალური ფენის სტილები * /. გადაფარვა (ზემოდან: 0; მარჯვნივ: 0; ქვედა: 0; მარცხნივ: 0; z-index: 1; ხილვადობა: დამალული; / * გათიშვის ფონი * / ფონი-ფერი: rgba (0, 0, 0, 0.7); გაუმჭვირვალეობა: 0; პოზიცია: ფიქსირებული; / * ფიქსირებული პოზიციონირება * / კურსორი: ნაგულისხმევი; / * კურსორის ტიპი * / -ვებკიტ -გადასვლა: გაუმჭვირვალობა .5s; -moz -გარდამავალი: გამჭვირვალეობა 5s; -ms-გარდამავალი: opacity .5s; -o-გარდამავალი: opacity .5s; გარდამავალი: opacity .5s;). Overlay: target (ხილვადობა: ხილული; opacity: 1;) .is-image (ზედა: 0; მარჯვნივ: 0; ქვედა: 0; მარცხნივ: 0; ჩვენება: ბლოკი; ზღვარი: ავტო; სიგანე: 100%; სიმაღლე: ავტო; / * შიდა სურათების კუთხეების დამრგვალება * / -webkit -border -radius: 4px; -moz -border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px;) / * ჩამონტაჟებული m-media ელემენტები, კადრები * / embed, iframe (ზედა: 0; მარჯვნივ: 0; ქვედა: 0; მარცხენა: 0; ჩვენება: ბლოკი; ზღვარი: ავტო; მინ-სიგანე: 320px; მაქსიმალური სიგანე: 600px; სიგანე: 100%;). popup h1 ( / * სათაური 1 * / ფერი: # 008000; ტექსტის გასწორება: მარცხენა ; ტექსტი-ჩრდილი: 0 1 გვ x 3px rgba (0,0,0, .3); font: 24px "Trebuchet MS", Helvetica, sans-serif; font-weight: bold; ). popup h2 ( / * heading 2 * / color: # 008000; text-align: left; text-shadow: 0 1px 3px rgba (0,0,0, .3); font: 22px "Trebuchet MS", Helvetica , sans-serif;) / *** ფორმალური მოდალური სტილის სტილი *** / .popup (ზედა: 0; მარჯვნივ: 0; მარცხნივ: 0; შრიფტის ზომა: 14px; z-index: 10; ჩვენება: ბლოკი; ხილვადობა : დამალული; ზღვარი: 0 ავტო; სიგანე: 90%; წთ-სიგანე: 320px; მაქსიმალური სიგანე: 600px; / * ფიქსირებული პოზიცია, ფანჯარა სტაბილურია გადახვევისას * / პოზიცია: ფიქსირებული; შევსება: 15px; საზღვარი: 1px მყარი # 383838; / * კუთხეების დამრგვალება * / -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; background-color: #FFFFFF; / * გარე ყუთი-ჩრდილი * / -webkit-box-shadow: 0 0 6px rgba (0, 0, 0, 0.8); -moz-box-shadow: 0 0 6px rgba (0, 0, 0, 0.8);- ms-box-ჩრდილი: 0 0 6px rgba (0, 0, 0, 0.8); -o-box-shadow: 0 0 6px rgba (0, 0, 0, 0.8); box-shadow: 0px 0px 6px rgba ( 0, 0, 0, 0.8); / * ფანჯრის სრული გამჭვირვალობა, რომელიც გამოჩნდება დაწკაპუნებაზე * / opacity: 0; / * გარდამავალი ეფექტი (გამოჩნდება) * / -webkit -transiti ჩართულია: ყველა მარტივად .5 წ; -moz- გადასვლა: ყველა მარტივად .5 წ; -ms-გარდამავალი: ყველა მარტივად .5 წ; -o-გარდამავალი: ყველა მარტივად .5 წ; გადასვლა: ყველა მარტივად .5 წ; ) / * საშუალებას აძლევს ფანჯარას გამოჩნდეს და დაბნელდეს ფონი * /. გადაფარვა: target + .popup (ზედა: 20%; / * ფანჯრის პოზიცია გვერდის ზემოდან, როდესაც გამოჩნდება * / ხილვადობა: ხილული; 1; / * ამოიღეთ გამჭვირვალობა * /) / * შექმენით დახურვის ღილაკი * /. დახურვა (პოზიცია: აბსოლუტური; ზედა: -10px; მარჯვნივ: -10px; padding: 0; სიგანე: 20px; სიმაღლე: 20px; საზღვარი: 2px მყარი #ccc; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; background-color: rgba (61, 61, 61, 0. რვა); -webkit-box-shadow: 0px 0px 10px # 000; -moz-box-shadow: 0px 0px 10px # 000; box-shadow: 0px 0px 10px # 000; text-align: ცენტრი; ტექსტი-გაფორმება: არცერთი; font-weight: bold; ხაზის სიმაღლე: 20px; / * დააყენეთ მნიშვნელობები და გადასვლის ეფექტი hover * / -webkit- გადასვლა: ყველა მარტივად .8 წ; -moz-გარდამავალი: ყველა მარტივად .8 წმ; -ms-გარდამავალი: ყველა მარტივად .8 წ; -o-გარდამავალი: ყველა მარტივად .8 წ; გადასვლა: ყველა მარტივად .8 წ; ). დახურვა: ადრე (ფერი: rgba (255, 255, 255, 0.9); შინაარსი: "X"; text-shadow: 0 -1px rgba (0, 0, 0, 0.9); font-size: 12px;) . დახურვა: დარტყმა (ფონის ფერი: rgba (252, 20, 0, 0.8); / * გადაატრიალეთ ღილაკი hover * / -webkit -transform: როტაცია (360 გრადუსი); -მოზ -გარდაქმნა: როტაცია (360 გრადუსი); - ms -transform: როტაცია (360deg); -o -transform: როტაცია (360deg); გარდაქმნა: როტაცია (360deg);) / * სურვილისამებრ დანართების დამატებისას * / .popup p, .popup div (ზღვარი -ქვედა: 10px;)

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

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

ასეთი ამომხტარი ფანჯრების გარეგნობა, ზომა და დიზაინი სრულიად მრავალფეროვანია - გადახურვებით, ჩრდილებით, ანიმაციებით - დასათვლელად ბევრია. ალბათ, ის, რაც მათ აერთიანებს, არის ის, რომ ისინი ჩვეულებრივ ნაჩვენებია გვერდის ცენტრში - როგორც ჰორიზონტალურად, ასევე ვერტიკალურად. და ცენტრირება ხდება JS– ის საშუალებით. მე არ შევალ ამ გამოთვლების დეტალებში, მე მათ მხოლოდ მოკლედ აღვწერ:

ამომხტარ HTML კოდს ჩვეულებრივ აქვს შემდეგი სტრუქტურა:

- ამომხტარი კონტენტით ->

და CSS ( აქ და ქვემოთ, მე შეგნებულად გამოვტოვებ ზოგიერთი თვისების დაწერას, რომელიც აუცილებელია მხოლოდ ზოგიერთი ბრაუზერისთვის და მათი ვერსიებისთვის, და დატოვებს მხოლოდ ყველაზე ძირითადს):

ამომხტარი გადაფარვა (
პოზიცია: ფიქსირებული;
მარცხენა: 0;
ზედა: 0;
ფონი: # 000;
გამჭვირვალეობა: .5;
ფილტრი: ალფა (გამჭვირვალეობა = 50);
z- ინდექსი: 999
}
. პოპუპი (
პოზიცია: აბსოლუტური;
სიგანე: 20%;
z- ინდექსი: 1000;
საზღვარი: 1px მყარი #ccc;
ფონი: #fff
}

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

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

ეს არის ის, რასაც ჩვენ გავაკეთებთ.

ქვემოთ მე მივცემ მაგალითს ამომხტარი ფანჯრისა, რომელიც მუშაობს ძირითადი ბრაუზერების ყველა ძირითად ვერსიაში. რომ ის სწორად იმუშაოს IE- ში<9 необходима некоторая экстра-разметка и хаки, потому детальное описание написания такого метода я опущу, а для интересующихся выложу полную версию.

ამრიგად, ჩვენ გვაქვს გვერდი ღილაკით, როდესაც დაჭერით ის უნდა გამოჩნდეს მოდალური ფანჯარაგარკვეული ინფორმაციით და ყველა სხვა შინაარსი უნდა იყოს დაჩრდილული გადაფარვით.

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

< div class ="popup__overlay">
< div class ="popup">

და რამდენიმე CSS:

ამომხტარი გადაფარვა (
პოზიცია: ფიქსირებული;
მარცხენა: 0;
ზედა: 0;
სიგანე: 100%;
სიმაღლე: 100%;
z- ინდექსი: 999
}
. პოპუპი (
}

ფიქსირებული ზომები

უმარტივესი ვარიანტი. თქვენ არ გჭირდებათ რაიმე ახლის გამოგონება:

ამომხტარი ფანჯარა (
დარჩა: 50%;
ზედა: 50%;
სიგანე: 400 პიქსელი;
სიმაღლე: 200 პიქსელი;
ზღვარი -მარცხენა: -200px;
ზღვარი -ზედა: -100 პიქსელი
}

ნახევარი სიგანისა და სიმაღლის უარყოფითი ზღვარი ტრივიალური და მოსაწყენია, არაფერი ორიგინალური ამაში.

ამომხტარი ზომები დამოკიდებულია შინაარსზე

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

ამომხტარი ფანჯარა (
ზღვარი: ავტო
}

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

ვერტიკალური გასწორება. სწორედ აქ ხდება საინტერესო. რა თქმა უნდა, მაგიდა ან მაგიდის ემულაცია ჩვენების გამოყენებით: table & display: table-cell- ს შეეძლო გაუმკლავდეს ასეთ ამოცანას უპრობლემოდ, მაგრამ ძველ IE- ში ამ სამუშაოს გაკეთება უფრო ძვირია. მაგიდაც ქრება - გასაგები მიზეზების გამო.

ასე რომ, ზღვარი უკვე აკლია - ჩვენ არ ვიცით ზომები. გავიხსენოთ რა თვისებებია მსგავსი ეფექტებით. დიახ, ტექსტის გასწორება. მაგრამ მხოლოდ შიდა ელემენტებისთვის. ᲙᲐᲠᲒᲘ. როგორც ჩანს, თავად ღმერთმა ბრძანა ჩვენების გამოყენება: inline -block - ბლოკის ელემენტი, რომელზედაც შეიძლებოდა შინაგანი ელემენტების თვისებების გამოყენება. ყველა ბრაუზერში ამ ქონების მხარდაჭერით, ყველაფერი, შეიძლება ითქვას, წესრიგშია. კოდი ხდება ასე:

ამომხტარი გადაფარვა (
პოზიცია: ფიქსირებული;
მარცხენა: 0;
ზედა: 0;
სიგანე: 100%;
სიმაღლე: 100%;
z- ინდექსი: 999;
text-align: ცენტრი
}
. პოპუპი (
ჩვენება: inline -block;
ვერტიკალური გასწორება: შუა
}

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

ამომხტარი გადაფარვა: შემდეგ (
ჩვენება: inline -block;
სიგანე: 0;
სიმაღლე: 100%;
ვერტიკალური-გასწორება: შუა;
შინაარსი: ""
}

რჩება ნახევრად გამჭვირვალე გადაფარვის დამატება - rgba გაუმკლავდება ამას. ყველაფერი! ახლა ამომხტარი ადგილის რეგულირება შესაძლებელია მხოლოდ ბრაუზერის საშუალებით CSS დონეზე.

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

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

ძალიან მოსახერხებელია PopUp ფანჯრების გამოყენება ajax– თან ერთად, მაგრამ ეს არის თემა სხვა გაკვეთილისთვის.

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

კონტაქტში

ფეისბუქი

ტვიტერი

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

პრობლემის განცხადება (TOR)

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

გადაწყვეტა

მეთოდი 1

html

css

* (შრიფტი-ოჯახი: არეალი;). ბ-კონტეინერი (სიგანე: 200px; სიმაღლე: 150px; ფონის ფერი: #ccc; ზღვარი: 0px ავტო; შევსება: 10px; შრიფტის ზომა: 30px; ფერი: #fff;) .b-popup (სიგანე: 100%; სიმაღლე: 2000px; ფონის ფერი: rgba (0,0,0,0.5); გადავსება: დამალული; პოზიცია: ფიქსირებული; ზედა: 0px;) .b-popup .b-popup -შინაარსი (ზღვარი: 40px auto 0px auto; სიგანე: 100px; სიმაღლე: 40px; შევსება: 10px; ფონის ფერი: # c5c5c5; საზღვარი-რადიუსი: 5px; box-shadow: 0px 0px 10px # 000;)

შედეგი:

ძალიან ხშირად რეკომენდირებულია გამოიყენოთ:

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

მეთოდი 2

ეს მეთოდი მკვეთრად არ განსხვავდება 1 მეთოდისგან, მაგრამ მე მას უფრო მოსახერხებლად ვთვლი.

Html (უცვლელი)

Css

* (font-family: Areal;). b- კონტეინერი (სიგანე: 200px; სიმაღლე: 150px; ფონის ფერი: #ccc; ზღვარი: 0px ავტომატი; padding: 10px; შრიფტის ზომა: 30px; ფერი: #fff;) .b-popup (სიგანე: 100%; მინ-სიმაღლე: 100%; ფონის ფერი: rgba (0,0,0,0.5); გადავსება: დამალული; პოზიცია: ფიქსირებული; ზედა: 0px;). b-popup b-popup-content (ზღვარი: 40px auto 0px auto; width: 100px; სიმაღლე: 40px; padding: 10px; background-color: # c5c5c5; border-radius: 5px; box-shadow: 0px 0px 10px # 000;)

შედეგი მსგავსია

ქონების წყალობით: მინ-სიმაღლე: 100%;ჩვენმა ბლოკმა "დაბნელებამ" შეიძინა სიგანე 100% და მინიმალური სიმაღლე 100% ეკრანზე.

ერთადერთი ნაკლი ეს მეთოდიარის ის Internet Explorerმხარს უჭერს ამ თვისებას მხოლოდ 8.0 ვერსიიდან.

ჯუკერის მაგიის დამატება

ახლა მოდით დავამატოთ ბმულები ჩვენი ამომხტარი ფანჯრის დასამალად / საჩვენებლად.

ამისათვის თქვენ უნდა დააკავშიროთ JQuery ბიბლიოთეკა და მცირე სკრიპტი:

ასევე Html უნდა განახლდეს:

შედეგი

ახლა, როდესაც გვერდი იტვირთება, PopUp გაქრება.

აქ შეგიძლიათ ნახოთ შედეგი.

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

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

ძალიან მოსახერხებელია PopUp ფანჯრების გამოყენება ajax– თან ერთად, მაგრამ ეს არის თემა სხვა გაკვეთილისთვის.

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

კონტაქტში

ფეისბუქი

ტვიტერი

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

პრობლემის განცხადება (TOR)

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

გადაწყვეტა

მეთოდი 1

html

css

* (შრიფტი-ოჯახი: არეალი;). ბ-კონტეინერი (სიგანე: 200px; სიმაღლე: 150px; ფონის ფერი: #ccc; ზღვარი: 0px ავტო; შევსება: 10px; შრიფტის ზომა: 30px; ფერი: #fff;) .b-popup (სიგანე: 100%; სიმაღლე: 2000px; ფონის ფერი: rgba (0,0,0,0.5); გადავსება: დამალული; პოზიცია: ფიქსირებული; ზედა: 0px;) .b-popup .b-popup -შინაარსი (ზღვარი: 40px auto 0px auto; სიგანე: 100px; სიმაღლე: 40px; შევსება: 10px; ფონის ფერი: # c5c5c5; საზღვარი-რადიუსი: 5px; box-shadow: 0px 0px 10px # 000;)

შედეგი:

ძალიან ხშირად რეკომენდირებულია გამოიყენოთ:

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

მეთოდი 2

ეს მეთოდი მკვეთრად არ განსხვავდება 1 მეთოდისგან, მაგრამ მე მას უფრო მოსახერხებლად ვთვლი.

Html (უცვლელი)

Css

* (font-family: Areal;). b- კონტეინერი (სიგანე: 200px; სიმაღლე: 150px; ფონის ფერი: #ccc; ზღვარი: 0px ავტომატი; padding: 10px; შრიფტის ზომა: 30px; ფერი: #fff;) .b-popup (სიგანე: 100%; მინ-სიმაღლე: 100%; ფონის ფერი: rgba (0,0,0,0.5); გადავსება: დამალული; პოზიცია: ფიქსირებული; ზედა: 0px;). b-popup b-popup-content (ზღვარი: 40px auto 0px auto; width: 100px; სიმაღლე: 40px; padding: 10px; background-color: # c5c5c5; border-radius: 5px; box-shadow: 0px 0px 10px # 000;)

შედეგი მსგავსია

ქონების წყალობით: მინ-სიმაღლე: 100%;ჩვენმა ბლოკმა "დაბნელებამ" შეიძინა სიგანე 100% და მინიმალური სიმაღლე 100% ეკრანზე.

ამ მეთოდის ერთადერთი ნაკლი ის არის, რომ Internet Explorer მხარს უჭერს ამ თვისებას მხოლოდ 8.0 ვერსიიდან.

ჯუკერის მაგიის დამატება

ახლა მოდით დავამატოთ ბმულები ჩვენი ამომხტარი ფანჯრის დასამალად / საჩვენებლად.

ამისათვის თქვენ უნდა დააკავშიროთ JQuery ბიბლიოთეკა და მცირე სკრიპტი:

ასევე Html უნდა განახლდეს:

შედეგი

ახლა, როდესაც გვერდი იტვირთება, PopUp გაქრება.

აქ შეგიძლიათ ნახოთ შედეგი.

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

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

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

ეს არის როდესაც ვამოწმებ, რომ ყველაფერი კარგად მუშაობს:

ინსტალაციის დაწყება:

ფანჯარა ღილაკით

CSS

ბუკსატონ-სატოკავატ (
ჩვენება: შიდა ბლოკი;
ტექსტის გაფორმება: არცერთი;
ზღვარი-მარჯვნივ: 7px;
საზღვარი-რადიუსი: 5px;
შევსება: 7px 9px;
ფონი: # 199a36;
ფერი: # fbf7f7! მნიშვნელოვანია;
}

ანელუმენი (
ჩვენება: flex;
პოზიცია: ფიქსირებული;
მარცხენა: 0;
ზედა: -100%;
სიგანე: 100%;
სიმაღლე: 100%;
გასწორება-ერთეულები: ცენტრი;
გამართლება-შინაარსი: ცენტრი;
გამჭვირვალეობა: 0;
-webkit- გადასვლა: ტოპ 0s .7s, opacity .7s 0s;
გადასვლა: ზედა 0s .7s, opacity .7s 0s;
}

ანელუმენი: სამიზნე (
ზედა: 0;
გამჭვირვალეობა: 1;
-ვებკიტი-გადასვლა: არცერთი;
გადასვლა: არცერთი;
}

ანელუმენის ფიგურა (
სიგანე: 100%;
მაქსიმალური სიგანე: 530 პიქსელი;
პოზიცია: ნათესავი;
ბალიში: 1.8em;
გამჭვირვალეობა: 0;
ფონის ფერი: თეთრი;
-ვებკიტი-გარდამავალი: გაუმჭვირვალე .7 წ;
გარდამავალი: გაუმჭვირვალე .7s;
}

ანელუმენი. დაბალი ნუსკას ფიგურა (
ფონი: # f9f5f5;
საზღვარი-რადიუსი: 7px;
padding-top: 8px;
საზღვარი: 3px მყარი #aaabad;
}

ანელუმენი. ნუშკას ფიგურა h2 (
ზღვარი-ზედა: 0;
padding-bottom: 3px;
საზღვარი-ქვედა: 1px მყარი # dcd7d7;
}

ანელუმენი: სამიზნე ფიგურა (
გამჭვირვალეობა: 1;
}

Anelumen.lowingnuska .compatibg-ukastywise (
ტექსტის გაფორმება: არცერთი;
პოზიცია: აბსოლუტური;
მარჯვნივ: 8px;
ზედა: 0px;
შრიფტის ზომა: 41px;
}

ანელუმენი .ნედიზმისეგი (
მარცხენა: 0;
ზედა: 0;
სიგანე: 100%;
სიმაღლე: 100%;
პოზიცია: ფიქსირებული;
ფონის ფერი: rgba (10, 10, 10, 0.87);
შინაარსი: "";
კურსორი: ნაგულისხმევი;
ხილვადობა: დამალული;
-ვებკიტი-გადასვლა: ყველა .7s;
გადასვლა: ყველა .7s;
}

ანელუმენი: სამიზნე .nedismiseg (
ხილვადობა: ხილული;
}

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

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