JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Modal Example</title>
</head>
<body>

<script>
var modal = null; // Variable to hold the currently open modal

function open_ModalWindow(buttonData) {
  if (modal) return; // Only allow one modal to be open at a time

  // Create the modal structure dynamically
  modal = document.createElement('div');
  modal.className = 'modal';
  modal.style.display = 'none'; // Initially hidden
  modal.style.position = 'fixed';
  modal.style.top = '50%';
  modal.style.left = '50%';
  modal.style.transform = 'translate(-50%, -50%)';
  modal.style.backgroundColor = 'rgba(255, 0, 0, 0.8)';
  modal.style.width = '500px';
  modal.style.height = '500px';
  modal.style.borderRadius = '10px';
  modal.style.boxShadow = '0 8px 16px rgba(0, 0, 0, 0.3)';
  modal.style.opacity = '0';
  modal.style.transition = 'opacity 0.3s ease, top 0.5s ease';
  modal.style.zIndex = '1000';
  modal.style.display = 'flex';
  modal.style.flexDirection = 'column';
  modal.style.justifyContent = 'center';
  modal.style.alignItems = 'center';
  modal.style.padding = '20px';
  modal.style.boxSizing = 'border-box';
  modal.innerHTML = `
    <span class="close" onclick="closeModal()">&times;</span>
    <div>Modal Content Goes Here</div>
  `;

  // Append buttons to the modal
  var buttonContainer = document.createElement('div');
  buttonContainer.style.marginTop = '20px';

  buttonData.buttons.forEach(function(button) {
    var btn = document.createElement('button');
    btn.id = button._id;
    btn.textContent = button._label;
    if (button._action) {
      btn.onclick = function() { eval(button._action); };
    } else if (button._link) {
      btn.onclick = function() { window.location.href = button._link; };
    }
    buttonContainer.appendChild(btn);
  });

  modal.appendChild(buttonContainer);

  // Append modal to the body
 ...