js implement click button black transparent modal pop-up layer form submission

Here's an example of how to implement a black transparent modal pop-up layer with a form submission using JavaScript:

HTML:

<button id="open-modal">Open Modal</button>

<div id="modal-container">
  <div id="modal">
    <form id="modal-form">
      <label for="name">Name:</label>
      <input type="text" id="name" name="name">
      <br>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email">
      <br>
      <button type="submit">Submit</button>
    </form>
  </div>
</div>

CSS:

#modal-container {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

#modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
}

JavaScript:

const openModalButton = document.getElementById('open-modal');
const modalContainer = document.getElementById('modal-container');
const modalForm = document.getElementById('modal-form');

openModalButton.addEventListener('click', () => {
  modalContainer.style.display = 'block';
});

modalForm.addEventListener('submit', (event) => {
  event.preventDefault();
  const name = document.getElementById('name').value;
  const email = document.getElementById('email').value;
  console.log(`Name: ${name}, Email: ${email}`);
  modalContainer.style.display = 'none';
});

In this example, we have a button with an ID of "open-modal" that opens the modal when clicked. The modal is contained within a div with an ID of "modal-container" and has a form with an ID of "modal-form". When the form is submitted, we prevent the default form submission behavior and extract the values of the name and email inputs. We then log these values to the console and hide the modal by setting the display property of the modal container to "none". The modal container has a black transparent background using the CSS "rgba" function.