TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Jak stworzyć Bootstrap 5 Modal?

1

Bootstrap 5 Modal to w zasadzie wyskakujące okienko wyświetlane po kliknięciu elementu takiego jak przycisk lub link tekstowy. Wykorzystuje JavaScript do wyświetlania treści po kliknięciu z efektem lightbox. Modalne wyskakujące okienko można zamknąć, klikając przycisk zamykania lub klikając poza oknem modalnym. Modal jest również określany wieloma innymi nazwami, takimi jak wyskakujące okienko, okno dialogowe lub alert. Zauważ, że ten wyskakujący alert różni się od oryginalnego komponentu alertu Bootstrap.

W tym samouczku stwórzmy kilka modalnych wyskakujących okienek, aby zrozumieć szczegóły komponentu.

Bootstrap 5 Modalny samouczek

Ten samouczek obejmuje następujące tematy:

  1. Modalne wyzwalane po kliknięciu przycisku
  2. Przewijanie treści wewnątrz modalu
  3. Dobór modów
  4. Modalny z podpowiedź i popover
  5. Korzystanie z układu siatki w treści modalnej
  6. Dostosowywanie komponentu modalnego

1 Tworzenie prostego modalnego wyzwalanego kliknięciem przycisku

Bootstrap modalna zawiera dwa składniki – Przycisk i modalne okno. Poniżej znajduje się kod przycisku dla modalnego:

<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#Modal1"> Click to launch modal </button>

Jak widać, to nic innego jak komponent przycisku z dodatkowymi atrybutami:

  • Atrybut data-toggle="modal" służy do identyfikowania przycisku jako komponentu modalnego.
  • Dalej jest data-target="#Modal1", który jest identyfikatorem, który powinien być unikalny. Ten sam identyfikator musi być użyty w komponencie modalnym.

Poniżej znajduje się kod modalnego wyskakującego okienka, którego należy użyć między sekcją body szablonu startowego Bootstrap.

<div class="modal fade" id="Modal1" tabindex="-1" role="dialog" aria-labelledby="Modal1" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="ModalLabel">Here is a Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Here goes the content of the modal. </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-warning">Save</button> </div> </div> </div> </div>

W komponencie modalnym jest używanych wiele klas CSS:

  • Zewnętrzne opakowanie div powinno mieć klasę CSS „.modal". Dodatkowa klasa „.fade” służy do zanikania pola modalnego, co jest opcjonalne.

  • Identyfikator powinien być taki sam, jak wartość identyfikatora ustawiona dla komponentu przycisku.

  • Upewnij się, że dodałeś inne atrybuty, takie jak tabindex, role i aria-hidden.

  • Treść modalna należy dodać w ciągu

    znaczniki identyfikowane przez klasę „.modal-dialog”.

  • Modal ma strukturę panelu lub karty z klasami zawartości, nagłówka, tytułu, treści i stopki.

  • Wszystkie części modalu powinny być owinięte wewnątrz a

    z klasą „.modal-content”.

  • Sekcja nagłówka jest utożsamiana z klasą „.modal-header” i składa się z dwóch komponentów – tytułu i przycisku. Komponent tytułu używa „.modal-title” i służy do dodawania nagłówka do wyskakującego okienka modalnego. Komponenty przycisku służą do włączenia ikony zamykania (X) w celu zamknięcia modalnego okna dialogowego.

  • Ciało modalne używa klasy „.modal-body” i zawiera treść modalną, która może być dowolnymi elementami, takimi jak tekst, przycisk, podpowiedź lub popover.

  • Sekcja stopki używa „.modal-footer” i zawiera dwa przyciski – jeden do zamykania, a drugi do zapisywania. Przycisk zamykania faktycznie zamyka modalne wyskakujące okienko. Ale przycisk zapisu jest fikcyjnym przyciskiem i powinieneś dodać własny kod, aby zapisać dokumenty na serwerze.

Ostateczny wynik będzie po prostu wyglądał jak przycisk, a kliknięcie go wywoła wyskakujące okienko modalne.

Jak stworzyć Bootstrap 5 Modal?

Bootstrap Modalny

Możesz dodać dowolny typ treści w sekcji treści modalnej, a także mieć różne warianty w sekcjach nagłówka i stopki.

2 Tworzenie modalu z przewijaną zawartością

Gdy treść jest długa, można ją przewijać w ramach modu bez przewijania strony zewnętrznej. Poniżej znajduje się kod do tworzenia przewijalnego wyskakującego okienka modalnego.

<button type="button" class="btn btn-danger btn-md" data-toggle="modal" data-target="#Modal2"> Open modal </button> <div class="modal fade" id="Modal2" tabindex="-1" role="dialog" aria-labelledby="Modal2" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="ModalLabel">Modal with Scrolling Content</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Here is the content for modal, enter lengthy content so that you can see the scrolling effect. </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary btn-md" data-dismiss="modal">Close</button> <button type="button" class="btn btn-info btn-md">Save</button> </div> </div> </div> </div>

Modal przewijania będzie wyglądał jak poniżej:

Jak stworzyć Bootstrap 5 Modal?

Przewijalna zawartość modalna

3 Rozmiary modalne

Rozmiar tutaj wskazuje szerokość modalnego. Możesz zwiększyć lub zmniejszyć rozmiar, dodając klasę „.modal-lg” lub „.modal-sm” do klasy „.modal-dialog”.

Pełny kod większego pola modalnego znajduje się poniżej:

<button class="btn btn-primary" data-toggle="modal" data-target=".example-modal-lg">Large modal</button> <div class="modal fade example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="LargeModal" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="ModalLabel">Large Modal Title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Here goes the content of large modal. </div> <div class="modal-footer"> <button type="button" class="btn btn-info" data-dismiss="modal">Close</button> <button type="button" class="btn btn-danger">Save</button> </div> </div> </div> </div>

Podobnie kompletny kod dla mniejszego pola modalnego jest następujący:

<button type="button" class="btn btn-warning" data-toggle="modal" data-target=".example-modal-sm">Small modal</button> <div class="modal fade example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="SmallModal" aria-hidden="true"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="ModalLabel">Small Modal Title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Here goes the content of small modal. </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-secondary">Save</button> </div> </div> </div> </div>

Możesz zobaczyć większe, domyślne i mniejsze rozmiary modalne, jak poniżej.

Jak stworzyć Bootstrap 5 Modal?

Większy modalny

Jak stworzyć Bootstrap 5 Modal?

Domyślny modalny

Jak stworzyć Bootstrap 5 Modal?

Mniejszy modalny

4 Modal z podpowiedzią i popoverem

Możliwe jest również wstawianie podpowiedzi i okienek popover wewnątrz treści modalnej. Poniżej znajduje się kod, który to robi:

<!-- Button trigger for modal --> <button type="button" class="btn btn-secondary btn-md" data-toggle="modal" data-target="#Modaltooltip"> Modal with Popover and Tooltip </button> <!-- Modal --> <div class="modal fade" id="Modaltooltip" tabindex="-1" role="dialog" aria-labelledby="Modaltooltip" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="ModalLabel">Here is a Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <h5>Popover in Modal</h5> <p>Click button for popover. <a href="#" role="button" class="btn btn-dark" title="Popover Title" data-content="Enter content to be shown inside popover" data-toggle="popover">button</a></p> <hr> <h5>Tooltip in Modal</h5> <p>Hover over <a href="#" title="Tooltip on Top" data-toggle="tooltip">this hyperlink</a> to see a tooltip.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary btn-md" data-dismiss="modal">Close</button> <button type="button" class="btn btn-warning btn-md">Save</button> </div> </div> </div> </div>

Etykietka i okienko dialogowe będą wyglądać jak poniżej. Podpowiedź pojawi się na górze po najechaniu myszą, a popover pojawi się po kliknięciu lewym przyciskiem myszy.

Jak stworzyć Bootstrap 5 Modal?

Popover i podpowiedź w treści modalnej

Uwaga: Pamiętaj, że podpowiedź i popover wymagają dodatkowego kodu JavaScript Poppera wraz z plikami skryptów Bootstrap. Dowiedz się więcej o podpowiedziach Bootstrap i składnikach popover Bootstrap.

5 Wstawianie układu siatki wewnątrz zawartości modalnej

Bootstrap ma potężny system układu siatki flexbox. Możesz łatwo wstawić zawartość do modalnego za pomocą kolumn układu siatki. Poniżej znajduje się przykład wstawiania różnych typów słupów siatki w ramach modalnego.

<button type="button" class="btn btn-dark btn-md" data-toggle="modal" data-target="#Modalgrid"> Modal with Grid </button> <div class="modal fade" id="Modalgrid" tabindex="-1" role="dialog" aria-labelledby="Modalgrid" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="ModalLabel">Here is a Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="container-fluid"> <div class="gridmodal"> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div> </div> <div class="row"> <div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div> <div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div> </div> <div class="row"> <div class="col-md-6 ml-auto">.col-md-6 .ml-auto</div> </div> <div class="row"> <div class="col-sm-9"> .col-sm-9 <div class="row"> <div class="col-8 col-sm-6"> .col-8 .col-sm-6 </div> <div class="col-4 col-sm-6"> .col-4 .col-sm-6 </div> </div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary btn-md" data-dismiss="modal">Close</button> <button type="button" class="btn btn-warning btn-md">Save</button> </div> </div> </div> </div>

Powinno to wyglądać jak poniżej w przeglądarce:

Jak stworzyć Bootstrap 5 Modal?

Modalny z zawartością układu siatki

6 Dostosowywanie komponentu modalnego Bootstrap

Jak widać, najnowsza wersja Bootstrap umożliwia dodawanie dowolnego rodzaju treści do wyskakującego okienka modalnego. Możesz dostosować kolor, obramowanie i wygląd każdego elementu w ramach modalnego, samodzielnie przez dodatkowy dodatkowy kod CSS. Na przykład w powyższym przykładzie siatki użyliśmy niestandardowej klasy CSS „.gridmodal”, aby dodać tło, obramowanie i odstępy, jak poniżej.

<style> .gridmodal .row>[class^=col-] { padding-top: .75rem; padding-bottom: .75rem; margin-bottom: .75em; background-color: rgba(86,61,124,.15); border: 1px solid rgba(86,61,124,.2); } </style>

Możesz także dodać klasę CSS do domyślnych klas Bootstrap. Na przykład, jeśli chcesz dodać efekt cienia do przycisków modalnych, możesz po prostu dodać klasę „btn-md”, jak poniżej.

<!-- Button trigger for modal --> <button type="button" class="btn btn-secondary btn-md" data-toggle="modal" data-target="#Modal1"> Click to launch modal </button> <!-- Modal --> <div class="modal fade" id="Modal1" tabindex="-1" role="dialog" aria-labelledby="Modal1" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="ModalLabel">Here is a Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Here goes the content of the modal. </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary btn-md" data-dismiss="modal">Close</button> <button type="button" class="btn btn-warning btn-md">Save</button> </div> </div> </div> </div>

Dodaliśmy niestandardową klasę „btn-md” do trzech komponentów przycisków, a wynik zostanie wyświetlony w przeglądarce jak poniżej:

Jak stworzyć Bootstrap 5 Modal?

Przyciski z efektem cienia

Poniżej znajduje się niestandardowy CSS dla klasy „btn-md”, który można dodać w nagłówku strony HTML w… znacznikach. Możesz też dodać kod w zewnętrznym pliku CSS (prawdopodobnie style.css Twojego motywu) i połączyć CSS w nagłówku.

.btn-md { border-width: 0; outline: none; border-radius: 2px; box-shadow: 0 1px 4px rgba(0, 0, 0, .6); cursor: pointer; }

Zawijanie

Modals to łatwy sposób na pokazanie zawartości w wyskakującym oknie dialogowym. To bardzo pomaga skoncentrować się na głównej treści oferowanej na stronie. Zainteresowani użytkownicy mogą kliknąć łącze lub przycisk, aby wywołać okna modalne i przeczytać dalej.


Dowiedz się o Bootstrapie 5 (Indeks )


Źródło nagrywania: webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów