Как да се съгласуват модален прозорец в центъра, проектирането и разработването на сайта

Как да се съгласуват модален прозорец в центъра, проектирането и разработването на сайта

Добър ден 🙂

В тази статия искам да споделя с вас начина, по който аз използвам много често. С него можете да се приведе в съответствие изскачащия прозорец нагоре в центъра на екрана. Основното предимство на този метод е, че вие ​​сте абсолютно не е важно ширината и височината на модален прозорец. Това е много полезна, когато трябва адаптивно оформление и не е дадено със светла височина на прозореца. Много майстори с лекота Align прозорец хоризонтално, вертикално, но това е най-често се използват или са точно отклонението от горната / долната част на екрана, или като процент.

Същността на метода е да се използва вертикално подравняване собственост. По-конкретно, необходимо е да се задали параметъра - средна. което ще помогне на нашите елементи на прозореца вертикално центрирани спрямо друга. Един пример за това, което получаваме, може да се разглежда по-долу:





Тя е много проста и се извършва с помощта на HTML + CSS. Първо трябва да добавите HTML код на нашия прозорец. Всичко е просто, както обикновено.

Нашата прозорец се състои от основна контейнер, който се простира по целия екран, и ще има по-прозрачна фон - modal_cinw_ctnr. Е, блок, който е на самия прозорец - modal_cinw. В кутията има бутон за затваряне на модален прозорец. Тя разписани събитието - OnClick. който също така изпълнява затваряне. Вътре го търси елемент с Haydee - modal_cinw_ctnr и добавяне на имоти, за да го дисплей: няма.

Сега ние се дефинират стилове, които ще направят работата на центриране на прозореца на страницата.

Помислете за основните параметри, които влияят на правилното показване на прозореца, за да:

  • #modal_cinw_ctnr - нашият съд. Той е даден определен позициониране, височината и ширината - 100%. Просто приведе текста на центъра с помощта на - текст подравняване. За прозорец на върха на всички елементи на сайта, трябва да настроите параметъра - Z-индексът, толкова по-добре.
  • #modal_cinw_ctnr :: след - добавяне на псевдо в нашия прозорец са били в състояние да приведе вертикално в центъра, за да работят на имота - вертикално подравняване. Всички параметри са задължителни, не не можете да изтриете! Псевдо-предписано дисплей параметър с имота - инлайн блок, както и пише повече от веднъж, за вертикално положение с помощта на - вертикално подравняване: средна.
  • .modal_cinw - нашият модален прозорец. Има три основни параметри - дисплей: инлайн блок; вертикално подравняване: средна; позиция: относителна; Други при поискване, но и желателно.
  • modal_close - бутон Close. Тук всички настройки зависят от това, което искате да я види. Бъдете креативни с него каквото си искате.

Това е всичко, прозорец за подравняване на страницата. Към днешна дата, този метод ми харесва най-много и никога не ме разочарова. Надявам се да не ви разочаровам, както и да използвате и се наслаждавайте.

Това е всичко, благодаря ви за вниманието. 🙂

Ако сте били от полза за работата си, можете да подкрепят сайта :)

Здравейте скъпи приятели

Имате AdBlock инсталирано разширение или други подобни. Добавете сайта си в белия списък, и по този начин да допринесе за vnesesh неговото развитие. Инструкции за това как да деактивирате AdBlock искат този прозорец