TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Come creare Bootstrap 5 modale?

4

Bootstrap 5 Modal è fondamentalmente una finestra popup mostrata facendo clic su un elemento come un pulsante o un collegamento di testo. Usa JavaScript per mostrare il contenuto al clic con effetto lightbox. Il popup modale può essere chiuso facendo clic sul pulsante di chiusura o facendo clic all’esterno della finestra modale. Modal è indicato anche con molti altri nomi come popup, dialog o alert. Nota che questo avviso popup è diverso dal componente di avviso Bootstrap originale .

In questo tutorial creiamo alcuni popup modali per comprendere i dettagli del componente.

Tutorial modale Bootstrap 5

Questo tutorial copre i seguenti argomenti:

  1. Modale attivato al clic del pulsante
  2. Scorrimento del contenuto all’interno di modal
  3. Dimensionamento dei modali
  4. Modale con tooltip e popover
  5. Utilizzo del layout della griglia all’interno del contenuto modale
  6. Personalizzazione del componente modale

1 Creazione di un modale semplice attivato al clic del pulsante

Un modale Bootstrap contiene due componenti: pulsante e finestra modale. Di seguito è riportato il codice del pulsante per un modale:

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

Come vedi, non è altro che un componente pulsante con attributi aggiuntivi:

  • L’attributo data-toggle="modal" viene utilizzato per identificare il pulsante come componente modale.
  • Il prossimo è data-target = "# Modal1" che è un ID che dovrebbe essere univoco. Questo stesso ID deve essere utilizzato nel componente modale.

Di seguito è riportato il codice per il popup modale, dovresti utilizzare questo codice tra la sezione del corpo del modello di avvio 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>

Esistono più classi CSS utilizzate in un componente modale:

  • Il wrapper div esterno dovrebbe avere una classe CSS ".modal". La classe aggiuntiva ".fade" viene utilizzata per sfumare la casella modale che è opzionale.

  • L’ID deve essere uguale al valore ID impostato per il componente pulsante.

  • Assicurati di aggiungere altri attributi come tabindex, role e aria-hidden.

  • Il contenuto modale dovrebbe essere aggiunto all’interno di

    tag identificati con la classe “.modal-dialog".

  • Modal ha una struttura a pannello o scheda con classi di contenuto, intestazione, titolo, corpo e piè di pagina.

  • Tutte le parti del modale dovrebbero essere avvolte all’interno di a

    con la classe “.modal-content”.

  • La sezione dell’intestazione è identificata con la classe ".modal-header" e ha due componenti: titolo e pulsante. Il componente del titolo utilizza ".modal-title" e viene utilizzato per aggiungere un’intestazione al popup modale. I componenti del pulsante vengono utilizzati per includere l’icona di chiusura (X) per chiudere la finestra di dialogo modale.

  • Il corpo modale utilizza la classe ".modal-body" e contiene il corpo del modale che può essere qualsiasi elemento come testo, pulsante, descrizione comando o popover.

  • La sezione piè di pagina utilizza ".modal-footer" e contiene due pulsanti: uno per la chiusura e l’altro per il salvataggio. Il pulsante di chiusura chiuderà effettivamente il popup modale. Ma il pulsante di salvataggio è un pulsante fittizio e dovresti aggiungere il tuo codice per salvare i documenti sul server.

L’output finale assomiglierà semplicemente a un pulsante e facendo clic su di esso si attiverà una finestra modale popup.

Come creare Bootstrap 5 modale?

Bootstrap Modale

Puoi aggiungere qualsiasi tipo di contenuto all’interno della sezione del corpo modale e avere anche variazioni nelle sezioni di intestazione e piè di pagina.

2 Creazione modale con contenuto a scorrimento

Quando la lunghezza del contenuto è lunga, è possibile scorrere all’interno del modale senza scorrere la pagina esterna. Di seguito è riportato il codice per la creazione di popup modali scorrevoli.

<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>

La modalità di scorrimento apparirà come di seguito:

Come creare Bootstrap 5 modale?

Contenuto modale scorrevole

3 Dimensionamento dei Modali

Il dimensionamento qui indica la larghezza del modale. Puoi aumentare o diminuire la dimensione aggiungendo la classe ".modal-lg" o ".modal-sm" alla classe ".modal-dialog".

Il codice completo della casella modale più grande è riportato di seguito:

<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>

Allo stesso modo il codice completo per la scatola modale più piccola è il seguente:

<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>

Puoi vedere le dimensioni modali più grandi, predefinite e più piccole come di seguito.

Come creare Bootstrap 5 modale?

Modale più grande

Come creare Bootstrap 5 modale?

Modale predefinito

Come creare Bootstrap 5 modale?

Modale più piccolo

4 Modal con Tooltip e Popover

È anche possibile inserire tooltip e popover all’interno del contenuto modale. Di seguito è riportato il codice per farlo:

<!-- 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>

Il tooltip e il popover appariranno come di seguito. La descrizione comando verrà visualizzata in alto al passaggio del mouse e il popover verrà visualizzato a sinistra al clic.

Come creare Bootstrap 5 modale?

Popover e descrizione comando all’interno del contenuto modale

Nota: ricorda che il tooltip e il popover necessitano di JavaScript Popper aggiuntivo insieme ai file di script Bootstrap. Ulteriori informazioni sui suggerimenti di Bootstrap e sui componenti popover di Bootstrap.

5 Inserimento del layout della griglia all’interno del contenuto modale

Bootstrap ha un potente sistema di layout della griglia flexbox. Puoi facilmente inserire contenuto all’interno del modale utilizzando le colonne del layout della griglia. Di seguito è riportato un esempio per inserire diversi tipi di colonne della griglia all’interno di un modale.

<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>

Dovrebbe apparire come di seguito nel browser:

Come creare Bootstrap 5 modale?

Contenuto modale con layout a griglia

6 Personalizzazione del componente modale Bootstrap

Come puoi vedere, l’ultima versione di Bootstrap ti consente di aggiungere qualsiasi tipo di contenuto all’interno del popup modale. Puoi personalizzare il colore, i bordi e l’aspetto di ogni elemento all’interno della modale con ulteriori CSS aggiuntivi da solo. Ad esempio, nell’esempio della griglia sopra abbiamo utilizzato una classe CSS personalizzata ".gridmodal" per aggiungere sfondo, bordo e spaziatura come di seguito.

<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>

Puoi anche aggiungere la classe CSS alle classi Bootstrap predefinite. Ad esempio, quando vuoi aggiungere l’effetto ombra ai pulsanti modali puoi semplicemente aggiungere la classe "btn-md" come di seguito.

<!-- 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>

Abbiamo aggiunto la classe personalizzata "btn-md" ai tre componenti del pulsante e il risultato verrà mostrato come di seguito sul browser:

Come creare Bootstrap 5 modale?

Pulsanti con effetto ombra

Di seguito è riportato il CSS personalizzato per la classe “btn-md” che può essere aggiunto all’interno della parte di intestazione della pagina HTML all’interno dei tag …. Oppure puoi aggiungere il codice in un file CSS esterno (probabilmente style.css del tuo tema "e collegare il CSS nell’intestazione.

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

Avvolgendo

I modali sono un modo semplice per mostrare il contenuto in una finestra di dialogo popup. Questo aiuta molto a concentrarsi sul contenuto principale offerto nella pagina. Gli utenti interessati possono fare clic sul collegamento o sul pulsante per richiamare le finestre modali e leggere ulteriormente.


Impara Bootstrap 5 (Indice )


Fonte di registrazione: webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More