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() {if (modal) return;
  // 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>
  `;  
  //--------------------------------
  document.body.appendChild(modal);

  // Show modal with animation
  setTimeout(function() {modal.style.opacity = '1'; },50);
  document.addEventListener('keydown', handleEscapeKey);
}

function closeModal() {
  if (!modal) return; // If no modal is open, return early

  // Hide modal with animation
  modal.style.opacity = '0';

  // Remove the modal from the DOM after the transition ends
  setTimeout(function() {
    if (modal && modal.parentNode) {
      modal.parentNode.removeChild(modal);
      modal = null; // Reset modal variable
    }
  }, 500); // Use the same duration as transition for consistency

  // Remove event listener when modal is...

JavaScript

{
	buttons: [
		{
      _id: 'xxx',
      _label: 'yyy',
      _action: '',
      _link: ''
    },
    {
      _id: 'xxx',
      _label: 'yyy',
      _action: '',
      _link: ''
    },
    {
      _id: 'xxx',
      _label: 'yyy',
      _action: '',
      _link: ''
    }
	]
}