bpeterso2000 · December 24, 2024 04:28
diff --git a/modal_form_js.html b/modal_form_js.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 Modal Dialog Example</title>
    <style>
        /* Modal styles */
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            // left: 0;
            // top: 0;
            // width: 100%;
            // height: 100%;
            overflow: auto;
        }

        .modal-content {
            background-color: #efefff;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
        input {
          margin-top: 1px;
          margin-bottom: 8px;
        }
    </style>
 </head>
 <body>

 <h2>HTML5 Modal Example</h2>
 <p id="currentColor">Current color: #ffffff</p>

 <!-- Button to open the modal -->
 <button id="myBtn">Open Modal</button>

 <!-- The Modal -->
 <div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <form id="getColor">
      <label for="color">Background Color in Hex</label><br>
      <input type="text" name="color" id="color" />
      <input type="submit" value="Submit" id="submit" />
    </form>
  </div>
 </div>

 <script>
    // Get the modal
    var modal = document.getElementById("myModal");

    // Get the button that opens the modal
    var btn = document.getElementById("myBtn");

    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];

    // When the user clicks the button, open the modal
    btn.onclick = function() {
      modal.style.display = "block";
    }

    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
      modal.style.display = "none";
    }

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
      if (event.target == modal) {
        modal.style.display = "none";
      }
    }

    const form = document.getElementById('getColor');
    form.addEventListener('submit', (event) => {
      event.preventDefault(); // prevent default form submission
      const color = document.getElementById('color').value;
      // validate form data here
      if (validateFormData(color)) {
        var currentColor = document.getElementById('currentColor');
        currentColor.innerText = color;
        // submit form data to server or perform other actions
        // console.log(`Form submitted: ${name}, ${email}`);
      } else {
        alert('Invalid form data');
      }
      modal.style.display = 'none';
    });

    function validateFormData(color) {
      return true;
    }
 </script>

 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>HTML5 Modal Dialog Example</title>
	<style>
	/* Modal styles */
	.modal {
	display: none;
	position: fixed;
	z-index: 1;
	// left: 0;
	// top: 0;
	// width: 100%;
	// height: 100%;
	overflow: auto;
	}

	.modal-content {
	background-color: #efefff;
	margin: 15% auto;
	padding: 20px;
	border: 1px solid #888;
	width: 80%;
	}

	.close {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
	cursor: pointer;
	}

	.close:hover,
	.close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
	}
	input {
	margin-top: 1px;
	margin-bottom: 8px;
	}
	</style>
	</head>
	<body>

	<h2>HTML5 Modal Example</h2>
	<p id="currentColor">Current color: #ffffff</p>

	<!-- Button to open the modal -->
	<button id="myBtn">Open Modal</button>

	<!-- The Modal -->
	<div id="myModal" class="modal">
	<div class="modal-content">
	<span class="close">×</span>
	<form id="getColor">
	<label for="color">Background Color in Hex</label><br>
	<input type="text" name="color" id="color" />
	<input type="submit" value="Submit" id="submit" />
	</form>
	</div>
	</div>

	<script>
	// Get the modal
	var modal = document.getElementById("myModal");

	// Get the button that opens the modal
	var btn = document.getElementById("myBtn");

	// Get the <span> element that closes the modal
	var span = document.getElementsByClassName("close")[0];

	// When the user clicks the button, open the modal
	btn.onclick = function() {
	modal.style.display = "block";
	}

	// When the user clicks on <span> (x), close the modal
	span.onclick = function() {
	modal.style.display = "none";
	}

	// When the user clicks anywhere outside of the modal, close it
	window.onclick = function(event) {
	if (event.target == modal) {
	modal.style.display = "none";
	}
	}

	const form = document.getElementById('getColor');
	form.addEventListener('submit', (event) => {
	event.preventDefault(); // prevent default form submission
	const color = document.getElementById('color').value;
	// validate form data here
	if (validateFormData(color)) {
	var currentColor = document.getElementById('currentColor');
	currentColor.innerText = color;
	// submit form data to server or perform other actions
	// console.log(`Form submitted: ${name}, ${email}`);
	} else {
	alert('Invalid form data');
	}
	modal.style.display = 'none';
	});

	function validateFormData(color) {
	return true;
	}
	</script>

	</body>
	</html>