Модални прозорци

Във фреймуорка Bootstrap разполагаме с богати възможности за изграждане на скрити прозорци, които да предоставят допълнителна информация на потребителите на уеб сайта ни по време на необходимост. С допълнителната приставка за тях в този урок ще разберем как да работим с тези прозорци.

Урок за приставката за модални прозорци

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

Плъгините може да се включват индивидуално(ползвайки Bootstrap’s отделния „modal.js“ файл), или всичките заедно наведнъж (ползвайки „bootstrap.js“ или „bootstrap.min.js“).

Как да създадем модален прозорец

Следващият пример показва как се създава обикновен модал в Bootstrap:

Опитайте сами »

Частта „Trigger“: За да активираме модален прозорец е необходимо да ползваме бутон или връзка. След това трябва да включим два data-* атрибута:

  • data-toggle="modal" отваря модалният прозорец
  • data-target="#myModal" сочи към атрибута id на модала

За повече информация относно атрибутите тук Частта „Modal“:
Родителския елемент <div> на модала трябва да има дефинирано ID което да бъде със ъсщата стойност като на атрибута data-target, който се ползва за активиране на модала(„myModal“). Класът .modal идентифицира съдържанието на елемента <div> като модал и го довежда на фокус. Класът .fade добавя ефект, който замъглява модала на вътре навън. Ако искаме да премахнем ефекта, трябва просто да премахнем каласа. Атрибута role="dialog" увеличава достъпността на съдържанието на уебсайта ни за електронни четци. Класът .modal-dialog задава правилните ширина и отстояния на модала ни. Частта „Modal content“:
HTML елемента <div> заедно с класа class="modal-content“ стилицират модала (border, background-color, etc.). Вътре в елемента<div> са добавени header, body и footer, които са конкретно за модала.

Класът .modal-header се ползва за дефиниране на стила на header-а на модала. Елемнта <button> вътре в header-а има атрибута data-dismiss="modal", който затваря модала при клик. Класа .close стилизира бутона за затваряне, а класа .modal-title стилизира header-а с правилни line-height. Класа .modal-body се ползва за дефиране на стиловете за body частта на модала. Тук можем да добавим всякакъв HTML – параграфи, видеа, изображения и т.н.

Класа .modal-footer дефинира стиловете за footer-а. Обърнете внимание, че тази област е правилно подравнена по подразбиране.


Как да коригираме размерите на модал

Можем да променяме размера със CSS само като се добави класът .modal-sm за малки по размер модали или класа .modal-lg за големи. Добавяне на класа .modal-dialog към елемента <div>:

Малък Modal

Опитайте сами »
Опитайте сами »

По подразбиране модалите са със среден размер.