Create a Simple Reusable JavaScript Modal Component

function createModal(title, content) {
  // Create modal elements
  const modalOverlay = document.createElement('div');
  modalOverlay.className = 'modal-overlay';
  modalOverlay.style.cssText = `
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000;
      `;

  const modalContent = document.createElement('div');
  modalContent.className = 'modal-content';
  modalContent.style.cssText = `
        background-color: white;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        max-width: 500px;
        width: 90%;
        text-align: center;
      `;

  const modalHeader = document.createElement('h2');
  modalHeader.textContent = title;
  modalHeader.style.cssText = 'margin-top: 0;';

  const modalBody = document.createElement('p');
  modalBody.textContent = content;
  modalBody.style.cssText = 'margin-bottom: 20px;';

  const closeButton = document.createElement('button');
  closeButton.textContent = 'Close';
  closeButton.style.cssText = `
        padding: 10px 20px;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 16px;
      `;

  // Append elements
  modalContent.appendChild(modalHeader);
  modalContent.appendChild(modalBody);
  modalContent.appendChild(closeButton);
  modalOverlay.appendChild(modalContent);

  // Add close functionality
  const closeModal = () => {
    document.body.removeChild(modalOverlay);
  };

  closeButton.addEventListener('click', closeModal);
  modalOverlay.addEventListener('click', (event) => {
    if (event.target === modalOverlay) {
      closeModal();
    }
  });

  // Append to body and show
  document.body.appendChild(modalOverlay);
}

// Example Usage:
// createModal('Welcome!', 'This is a dynamically created modal using pure JavaScript.');

// To trigger it, you might have a button:
// const showModalBtn = document.createElement('button');
// showModalBtn.textContent = 'Show Modal';
// showModalBtn.addEventListener('click', () => {
//   createModal('Important Notice', 'Please read this message carefully before proceeding.');
// });
// document.body.appendChild(showModalBtn);