Bootstrap | Plug -in modale
Il componente modale bootstrap è una finestra di dialogo che appare sullo schermo. Contiene il contenuto come titolo, testo, pulsanti, ecc. È facile da usare e flessibile visualizzare i contenuti in un'applicazione Web. Inoltre, puoi modificare il suo aspetto per adattarsi allo stile della tua applicazione.
Questo articolo ti guiderà su:
- Cos'è un plugin modale?
- Come creare un modale in bootstrap?
- Come regolare la dimensione modale in bootstrap?
Cos'è un plugin modale?
Il plug -in modale utilizza gli attributi JavaScript o dati per aprire o nascondere il contenuto secondo necessità. Più specificamente, è una finestra di dialogo o una casella pop-up visualizzata nella parte superiore della pagina.
Come creare un modale in bootstrap?
Per creare un modale in bootstrap, seguire i passaggi menzionati.
Passaggio 1: crea un pulsante per attivare il modale
Innanzitutto, crea un pulsante che innesca la finestra modale utilizzando il pulsante o gli elementi di collegamento. Gli attributi principali utilizzati all'interno di questo elemento sono "Data-Toggle" E "target dati". Per fare ciò, controlla le seguenti istruzioni:
- L'elemento del pulsante viene creato usando "btn","BTN-PRIMARY", E "btn-lg" classi.
- Specificare la "Data-Toggle"Attributo che apre la finestra modale.
- "target dati"Punta l'ID del modale.
Ecco il codice HTML:
Produzione
Passaggio 2: creare una finestra modale
La finestra modale viene creata seguendo i passaggi:
- Aggiungere un ""Elemento e assegnalo l'ID. Questo ID deve abbinare il “target dati"Il valore dell'attributo. Nel nostro caso, "demomodale"È specificato come ID contenitore.
- "modale"La classe mette in evidenza e riconosce il contenuto del div come modale.
- "dissolvenza"La classe applica l'effetto di transizione di dissolvenza e dissolvenza alla finestra modale. Puoi facilmente rimuovere questa classe se non la vuoi.
- "Dialog modale"La classe regola la larghezza e il margine della finestra di dialogo modale. Il contenuto del modale è specificato all'interno del contenitore creato.
Ecco l'implementazione dello scenario sopra discusso:
Passaggio 3: specificare il contenuto modale
Il contenuto del modale è specificato nel contenitore Div con classe "Dialog modale". Di seguito sono riportati i passaggi per aggiungere contenuto:
- Innanzitutto, aggiungi un ""Elemento con la classe"contenuto modale".
- All'interno di questo, crea un'intestazione, un corpo e un piè di pagina usando le classi "Modal-Header","corpo modale", E "footer modale".
- All'interno dell'intestazione, specificare un pulsante di chiusura e il titolo utilizzando "Title modale" classe.
- Quindi, specifica la parte del corpo utilizzando il "corpo modale" classe.
- Dopo l'intestazione e il corpo, crea un piè di pagina applicando il "footer modale" classe. La parte del piè di pagina contiene il pulsante che chiuderà la finestra modale:
Linuxhint
Linuxhint è il miglior sito di tutorial.
Produzione
Come regolare la dimensione modale in bootstrap?
La dimensione della finestra modale può essere determinata usando "modale-*"Classe, dove l'asterisco"*"Il simbolo indica la dimensione della finestra modale.
Piccola finestra modale
Nell'esempio seguente, il ""Elemento con classe"Dialog modale"Viene assegnata una classe"Modal-Sm":
Di conseguenza, la finestra modale si aprirà in piccole dimensioni:
Grande finestra modale
Ora, la classe "Modal-LG"È specificato per aprire la finestra modale in grandi dimensioni:
Produzione
Si tratta del plugin modale.
Conclusione
Per creare un modale in bootstrap, in primo luogo, creare un pulsante o un collegamento che attiverà il modale. Quindi, crea la finestra modale usando la classe "modale" E "Dialog modale". All'interno del contenitore, specificare il contenuto del modale utilizzando "contenuto modale". Utilizzare il "Title modale","corpo modale", E "footer modale"Classi per aggiungere il titolo di Modal, Modale-Body e Modale's Pièter. Questo post ha spiegato cos'è un plug -in modale e come crearlo.