Veja como fazer alert box modal coloridos com boostrap

Alert boxes bootstrap 5

 

 

Código

<div class="container mt-3 pt-3">
 <div class="row">
 <div class="col-12">
 <button id="button_modal_confirm" class="btn btn-danger" type="button">Confirm?</button>
 <button id="button_modal_warning" class="btn btn-warning" type="button">Atenção</button>
 <button id="button_modal_success" class="btn btn-success" type="button">Sucesso</button>
 <button id="button_modal_dark" class="btn btn-dark" type="button">Dark</button>
 </div>
 </div>
 </div>
 <!-- modal element -->
 <div id="my_modal" class="modal" tabindex="-1">
 <div class="modal-dialog modal-dialog-centered">
 <div class="modal-content">
 <div id="my_modal_header" class="modal-header">
 <h5 class="modal-title">Confirme exclusão</h5>
 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 </div>
 <div id="my_modal_body" class="modal-body">
 <p>Modal body text goes here.</p>
 </div>
 <div id="my_modal_footer" class="modal-footer">
 </div>
 </div>
 </div>
 </div>

 <script>
 let modalElement = document.getElementById('my_modal');

 //---
 let btnModalConfirm = domElementId('button_modal_confirm');
 btnModalConfirm.addEventListener("click", function(event) {

 let htmlModal = {
 header: {
 text: `Confirme a exclusão do item`,
 css: ['alert-danger', 'p-3'],
 },
 body: {
 text: `Este é o modal body`,
 css: []
 },
 footer: {
 text: `<button data-action="1" type="button" class="btn btn-danger">Excluir</button>
 <button data-action="0" type="button" class="btn btn-secondary opacity-50" data-bs-dismiss="modal">Cancelar</button>`,
 css: []
 }
 }

 renderModal(htmlModal);
 showModal();

 });

 let btnModalWarning = domElementId('button_modal_warning');
 btnModalWarning.addEventListener("click", function(event) {

 let htmlModal = {
 header: {
 text: `Isto é um modal warning`,
 css: ['alert-warning', 'p-3'],
 },
 body: {
 text: `Este é o modal body`,
 css: ''
 },
 footer: {
 text: `<button data-action="0" type="button" class="btn btn-secondary opacity-50" data-bs-dismiss="modal">Cancelar</button>`,
 css: ''
 }
 }

 renderModal(htmlModal);
 showModal();

 });

 let btnModalSuccess = domElementId('button_modal_success');
 btnModalSuccess.addEventListener("click", function(event) {

 let htmlModal = {
 header: {
 text: `Isto é um modal success`,
 css: ['alert-success', 'p-3'],
 },
 body: {
 text: `<div class="text-center p-3"> <i class="bi bi-check text-success"></i> Operação realizada com sucesso!</div>`,
 css: []
 },
 footer: {
 text: `<button data-action="0" type="button" class="btn btn-secondary opacity-50" data-bs-dismiss="modal">Cancelar</button>`,
 css: []
 }
 }

 renderModal(htmlModal);
 showModal();

 });

 let btnModalDark = domElementId('button_modal_dark');
 btnModalDark.addEventListener("click", function(event) {

 let htmlModal = {
 header: {
 text: `Isto é um modal dark`,
 css: ['alert-dark', 'p-3'],
 },
 body: {
 text: `<div class="text-center p-3"> <i class="bi bi-check text-dakr"></i> Um texto qualquer!</div>`,
 css: []
 },
 footer: {
 text: `<button data-action="3" type="button" class="btn btn-secondary">Teste</button>
 <button data-action="0" type="button" class="btn btn-secondary opacity-50" data-bs-dismiss="modal">Cancelar</button>`,
 css: []
 }
 }

 renderModal(htmlModal);
 showModal();

 });

 function renderModal({
 header,
 body,
 footer
 }) {

 let modalHeaderEl = domElementId('my_modal_header');
 modalHeaderEl.className = 'modal-header';
 modalHeaderEl.classList.add(...header.css);

 let modalBodyEl = domElementId('my_modal_body');
 modalBodyEl.className = 'modal-body';
 modalBodyEl.classList.add(...body.css);

 let modalFooterEl = domElementId('my_modal_footer');
 modalFooterEl.className = 'modal-footer';
 modalFooterEl.classList.add(...footer.css);

 modalHeaderEl.innerHTML = header.text;
 modalBodyEl.innerHTML = body.text;
 modalFooterEl.innerHTML = footer.text;
 }

 function showModal() {
 let modal = new bootstrap.Modal(modalElement, {
 keyboard: false
 });

 modal.show();
 }

 modalElement.addEventListener('show.bs.modal', function(event) {

 let divButtons = domElementId('my_modal_footer'); //document.getElementById('div_actions');
 let buttons = divButtons.getElementsByTagName('BUTTON');

 // Se existir apenas um botão.
 /* if (buttons[0]) {
 buttons[0].addEventListener("click", function(event) {
 domElementId('my_modal_body').innerHTML = 'Você clicou no botão de exclusão';
 });
 }*/

 // Caso exista mais de um ação. Podemos capiturar cada ação com base no atributo data-action.

 Array.from(buttons).forEach((item, i) => {
 item.addEventListener("click", function(event) {
 //action
 let action = this.getAttribute('data-action');
 domElementId('my_modal_body').innerHTML = action;
 });
 });

 });

 function domElementId(id) {
 return document.getElementById(id)
 }
 </script>