Come modellare il modale bootstrap

La finestra pop-up si riferisce alla piccola finestra sullo schermo della finestra esistente. Viene utilizzato per visualizzare ulteriori o nuove informazioni in qualsiasi applicazione. A volte, è anche noto come pubblicità. Bootstrap fornisce molte classi che aiutano a creare facilmente finestre modali. Tuttavia, usando CSS, la finestra modale può essere progettata in base ai tuoi gusti.

Questo articolo descriverà come modellare il modale bootstrap.

Come modellare il modale bootstrap?

Per imparare a modellare il modale bootstrap, segui i passaggi seguenti.

Passaggio 1: creare un file HTML

Innanzitutto, crea un modale seguendo le istruzioni indicate di seguito:

• Creare un ""Container e assegnarlo una classe"container principale-modale".
• Quindi, aggiungi un pulsante che attiverà la finestra modale. Assegnalo il "btn","BTN-PRIMARY", E "Show-Modal" classi. Imposta gli attributi di dati "Data-Toggle"Con il valore"modale" e il "target dati" con il "#mymodal" valore. Questo ID indica l'ID della finestra modale.
• Quindi, crea la finestra modale. Per fare ciò, aggiungi un ""Elemento e assegnarlo"modale" E "dissolvenza"Classi e imposta l'ID.
• Aggiungere un ""Per la finestra di dialogo del modale e assegnarlo il"Dialog modale" classe.
• Quindi, specifica il contenuto del modale in "" e assegnalo la classe "contenuto modale".
• Crea un pulsante di chiusura con la classe "vicino". IL "Data-Dismiss"L'attributo viene utilizzato per chiudere la finestra modale.
• Quindi, specifica il corpo modale con le classi "corpo modale" E "riga". Al suo interno, prendi una colonna di 6 griglie per l'immagine e 6 per il contenuto.
• L'immagine è incorporata usando il ""Tag.
• Quindi, dentro il ""Elemento con il"contenuto"Classe, aggiungi il titolo, il sottotitolo e la descrizione.
• Dopodiché, posiziona un pulsante con il bootstrap "btn","BTN-DANGER", E "P-2" classi:

Visualizza modale




×

Offerta speciale

20% di sconto da asporto e consegna

Camicie di migliore qualità. Ogni dimensione è disponibile. Facilmente lavabile.

Visualizza di più

Passaggio 2: classe "Main-Modal-Container"

L'intero contenitore è disegnato con il CSS "famiglia di font" proprietà:

.Main-Modal-Container
Font-Family: "Poppins", sans-serif;

Passaggio 3: stile "show-modal"

IL "Show-Modal"La classe è dichiarata con le seguenti proprietà:

.container principale-modale .show-modal
Colore: #FFF;
Background-color: #3A97C9;
Testo-trasformata: capitalizza;
imbottitura: 10px 15px;
Margine: 80px Auto 0;
blocco di visualizzazione;

Qui:

• "colore"Imposta il colore del carattere.
• "colore di sfondo"Imposta il colore di sfondo dell'elemento.
• "trasformata di testo"Capitalizza il testo.
• "imbottitura"Regola lo spazio attorno al contenuto dell'elemento.
• "margine"Produce spazio attorno all'elemento.
• "Schermo"Con il valore"bloccare"Imposta la larghezza dell'elemento al 100%.

Passaggio 4: stile "modal-dialog" di stile su Fade

.modale.dissolvenza .modal-dialog
trasformazione: scala (0);
Transizione: tutti i 450 ms cubic-bezier (.47, 1.64, .41, .8);

Quando il modale si attenua, le seguenti proprietà CSS vengono applicate al "Dialog modale" classe:

• "trasformare"Proprietà con il"scala()"Il valore aumenta o diminuisce le dimensioni dell'elemento in verticale o in orizzontale.
• "transizione"Sposta gradualmente l'elemento. IL "cubic-bezier ()"La funzione applica la curva cubica. È determinato da quattro punti.

Passaggio 5: stile "modal-dialog" in mostra

.modale.spettacolo .modal-dialog
trasformazione: scala (1);

Il CSS "trasformare"Proprietà con il valore"Scala (1)"Aumenta la dimensione della finestra di dialogo.

Passaggio 6: classe "contento modale"

.container principale-modale .Dialog modale .contento modale
raggio di confine: 30px;
confine: nessuno;
Overflow: nascosto;

IL "contenuto modale"È decorato con le seguenti proprietà:

• "raggio di confine"Round i bordi dell'elemento.
• "confine"Con il valore"nessuno"Nasconde il confine.
• "overflow"Controlla il flusso del contenuto.

Passaggio 7: stile "Close" di stile

.container principale-modale .Dialog modale .contenuto modale .vicino
Colore: #747474;
Background-color: RGBA (255, 255, 255, 0.5);
Altezza: 27px;
larghezza: 27px;
imbottitura: 0;
opacità: 1;
Overflow: nascosto;
Posizione: assoluto;
a destra: 15px;
Top: 15px;
Z-INDEX: 2;

Qui:

• "opacità"Definisce il livello di trasparenza dell'elemento.
• "posizione"Con il valore"assoluto"Imposta la posizione dell'elemento rispetto alla sua posizione genitore.
• "Giusto" E "superiore"Imposta spazio a destra e in alto del pulsante Chiudi.
• "Z-INDEX"Specifica l'ordine dello stack dell'elemento. L'ordine dello stack maggiore porta l'elemento nella parte anteriore.

Passaggio 8: stile "modale-body"

.container principale-modale .Dialog modale .contenuto modale .Modale-body
imbottitura: 0 !importante;

Lo spazio attorno all'intero corpo modale è regolato da CSS "imbottitura" proprietà. Inoltre, il "!importante"La parola chiave viene utilizzata per impostare l'importanza dell'elemento.

Passaggio 9: elemento "img" stile

.container principale-modale .Dialog modale .contenuto modale .corpo modale .ImG-immagine modale
Altezza: 100%;
larghezza: 100%;

Passaggio 10: modella la classe "contenuto"

.container principale-modale .Dialog modale .contenuto modale .corpo modale .contenuto
imbottitura: 35px 30px;

Usando il "imbottitura"Proprietà, lo spazio viene aggiunto attorno al"contenuto"Contenuto della classe.

Passaggio 11: classe "titolo" di stile

.container principale-modale .Dialog modale .contenuto modale .corpo modale .Titolo
Colore: #FB3640;
Font-Family: "Sacramento", corsivo;
Font-size: 35px;

Qui:

• "famiglia di font"Definisce lo stile del carattere.
• "dimensione del font"Imposta le dimensioni del carattere.

Passaggio 12: classe "sottotitolo" stile

.container principale-modale .Dialog modale .contenuto modale .corpo modale .sotto-titolo
Font-Weight: 600;
Testo-trasformata: maiuscolo;
Margine: 0 0 20px;
blocco di visualizzazione;

Secondo lo snippet di codice dato:

• "Font-peso"Imposta lo spessore del carattere.
• "trasformata di testo"Imposta il caso del carattere.

Produzione

Ecco come puoi modellare il modale bootstrap.

Conclusione

Per modellare la finestra modale bootstrap, prima, aggiungi il pulsante che attiverà il modale. Quindi, crea la finestra modale usando elementi HTML. Successivamente, aggiungi diverse proprietà CSS, tra cui "imbottitura","margine","colore","transizione"E molti altri per modellare la finestra modale. Più specificamente, il "Cubic-Bezier"La funzione viene utilizzata per applicare l'effetto di transizione in una curva di quattro punti sulla finestra modale. Questo post ha spiegato la procedura per modellare il modale bootstrap.