Bootstrap Elimina la conferma modale

Bootstrap Elimina la conferma modale

Bootstrap è un framework front-end ben sfruttato che semplifica la progettazione e lo sviluppo di applicazioni basate sul web. Più specificamente, il modale di conferma elimina è una funzionalità utile fornita da bootstrap. Può essere utilizzato per richiedere la conferma dell'utente prima di eliminare effettivamente qualcosa. Questo è un buon modo per evitare eliminazioni accidentali e rendere l'utente consapevole delle conseguenze delle loro azioni.

Questo articolo descriverà come creare un modale di conferma elimina in bootstrap.

Come creare un modale di conferma bootstrap elimina?

Per creare un modale di conferma elimina in bootstrap, prova le istruzioni fornite:

  • Innanzitutto, crea un pulsante che attiverà la finestra modale. IL "target dati"Attributo viene assegnato il valore"#delemodale"Che indica l'ID del modale.
  • Quindi, crea un modale usando "modale" E "dissolvenza" classi.
  • IL "Dialog modale"La classe crea la finestra di dialogo.
  • Quindi, aggiungi il "contenuto modale"Classe per specificare il contenuto nella finestra modale. All'interno di questa classe, compresa la classe "Modal-Header".
  • IL "Modal-Header"Crea l'intestazione della finestra modale. Contiene il titolo e il pulsante di chiusura.
  • Successivamente, crea la sezione Body specificando la classe come "corpo modale". Comprende la nota che apparirà nella finestra di dialogo.
  • Infine, crea il piè di pagina modale aggiungendo "footer modale" classe. Questo piè di pagina contiene anche due pulsanti.

Ecco il codice HTML dello scenario discusso:







Titolo modale




Sei sicuro di voler eliminare?









Si può osservare che abbiamo creato correttamente un modale di conferma bootstrap:

Ecco come è possibile creare un modale di conferma Elimina usando bootstrap.

Conclusione

Per creare un modale di conferma elimina, crea prima un pulsante utilizzando le classi "btn", E "BTN-DANGER"Classi che attivano la finestra modale e aggiungono l'attributo"target dati"Con il valore" id "del modale. Quindi, crea la finestra modale usando "modale"Classe e ID. Quindi, specifica il contenuto del modale usando il "contenuto modale","Modal-Header","corpo modale", E "footer modale" classi. Questo articolo ha dimostrato come creare un modale di conferma elimina in bootstrap.