Bootstrap html snippet. Custom modal

HTML code

Clean, semantic HTML that powers this Bootstrap 5.1.3 snippet. Copy and paste it into your page (with Bootstrap loaded) to reproduce the exact layout shown in the preview.

<!DOCTYPE html>
<html lang="pt-br" dir="ltr">
<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>

<body>
  <!-- created by @BrCodeSnippets -->
  <div class="container mt-3 pt-3">
    <div id="div_buttons" class="row g-3 m-0 p-0">
    </div>
  </div>
  <!-- modal element -->
  <div id="my_modal" class="modal shadow rounded" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div id="modal_header" class="modal-header">
          <h5 id="modal_title" class="modal-title">Modal title</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div id="modal_body" class="modal-body">
          <p>Modal body text goes here.</p>
        </div>
        <div id="modal_footer" class="modal-footer">
          footer do modal
          <button data-action="0" type="button" class=" ms-3 btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

CSS code

Scoped CSS that styles the component. Paste it after Bootstrap 5.1.3 to keep the design, spacing, and responsiveness consistent.

body{margin-top:20px;}

Javascript/Jquery code

Lightweight JS to power any interactions this snippet needs. Drop it under your scripts (after Bootstrap 5.1.3) to mirror the live demo.

 var myModalEl = domElementId('my_modal');
    var myModal = new bootstrap.Modal(myModalEl, {});
    var element = domElementId('modal_header');  //myModalEl.getElementsByClassName('modal-content')[0];
    var elementModalTitle = domElementId('modal_title');
    var divButtons = domElementId('div_buttons');
    var modalFooter = domElementId('modal_footer');
    var objColors = colors();
    // Quando fechar
    eventModal('hidden.bs.modal', function(data) {

    });

    // Quando abrir
    eventModal('show.bs.modal', function(data) {

    });

    function eventModal(event, cb) {
      myModalEl.addEventListener(event, function(event) {
        cb(event);
      });
    }

    function domElementId(id) {
      return document.getElementById(id)
    }

    function createStyle() {
      let style = document.createElement('style');
      style.type = 'text/css';

      style.innerText = '.cssClass { color: #F00; }';
      document.getElementsByTagName('head')[0].appendChild(style);
    }

    function render() {
      let classHtml = '';

      let style = document.createElement('style');
      style.type = 'text/css';


      Object.keys(objColors).forEach(function(key, i) {

        //let colorRGBA = item.code.rgba.join(',');
        let bg = 'class' + i + '';
        let divCol = document.createElement('div');
        divCol.className = 'col-6 col-sm-4 col-lg-3 col-xxl-2';

        // criando as classes CSS
        classHtml += '.class' + i + ' { color: #000;filter: invert(200%); background-color: ' + key + '; }';
        let a = document.createElement('a');
        a.href = 'javascript:void(0);';
        a.setAttribute('data-css', bg);
        a.innerHTML = objColors[key] +' ' + key;
        a.className = 'btn text-center w-100 h-100 border-0 p-5 ' + 'class' + i + '';
        divCol.appendChild(a);
        divButtons.appendChild(divCol);

        a.addEventListener('click', function() {
          element.className = 'modal-header bg-gradient';//'modal-content';
          modalFooter.className = 'modal-footer bg-gradient';
          console.log(this);
          elementModalTitle.innerHTML = 'Teste com a cor: '+ objColors[key] ;
          element.classList.add(bg);
          modalFooter.classList.add(bg);
          myModal.show();
        }, false);
      });

      style.innerText = classHtml;
      // adiciona as classes CSS criadas no documento
      document.getElementsByTagName('head')[0].appendChild(style);
    }

    render();

    function colors() {
      return {
        "#4c4f56": "Abbey",
        "#0048ba": "Absolute Zero",
        "#1b1404": "Acadia",
        "#7cb0a1": "Acapulco",
        "#b0bf1a": "Acid Green",
        "#7cb9e8": "Aero",
        "#c9ffe5": "Aero Blue",
        "#714693": "Affair",
        "#b284be": "African Violet",
        "#00308f": "Air Force Blue",
        "#72a0c1": "Air Superiority Blue",
        "#d4c4a8": "Akaroa",
        "#af002a": "Alabama Crimson",
        "#fafafa": "Alabaster",
        "#f5e9d3": "Albescent White",
        "#93dfb8": "Algae Green",
        "#f0f8ff": "Alice Blue",
        "#84de02": "Alien Armpit",
        "#e32636": "Alizarin Crimson",
        "#c46210": "Alloy Orange"
        
      }

    }