按钮弹出框html

wptutor 2024-05-10 按钮弹出框html已关闭评论 64 Views

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Popup Form</title>
<style>
    /* Styling for the button */
    .popup-button {
        background-color: #4CAF50; /* Green */
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
        border-radius: 8px;
    }

    /* Styling for the popup form */
    .popup-form {
        display: none; /* Initially hidden */
        position: fixed; /* Positioning on the screen */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #f2f2f2;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
        z-index: 1;
    }

    /* Styling for the close button */
    .close-button {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close-button:hover,
    .close-button:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }
</style>
</head>
<body>

<!-- Button to trigger the popup form -->
<button class="popup-button" onclick="toggleForm()">Open Form</button>

<!-- The popup form -->
<div id="popupForm" class="popup-form">
    <span class="close-button" onclick="toggleForm()">&times;</span>
    <h2>Popup Form</h2>
    <p>This is a popup form.</p>
    <!-- Add your form elements here -->
    <form>
        <label for="fname">First Name:</label><br>
        <input type="text" id="fname" name="fname"><br>
        <label for="lname">Last Name:</label><br>
        <input type="text" id="lname" name="lname"><br><br>
        <input type="submit" value="Submit">
    </form>
</div>

<script>
    // Function to toggle the visibility of the popup form
    function toggleForm() {
        var popup = document.getElementById("popupForm");
        if (popup.style.display === "none") {
            popup.style.display = "block";
        } else {
            popup.style.display = "none";
        }
    }
</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>Popup Form Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<button id="openFormBtn">Open Form</button>

<div id="popupForm" class="popup">
  <form class="popup-content" id="myForm">
    <span class="close" id="closeFormBtn">&times;</span>
    <h2>Popup Form</h2>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    <button type="submit">Submit</button>
  </form>
</div>

<script src="script.js"></script>

</body>
</html>

/* Popup container */
.popup {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

/* Popup content */
.popup-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* Close button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

// Get the modal
var modal = document.getElementById("popupForm");

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

// Get the <span> element that closes the modal
var span = document.getElementById("closeFormBtn");

// 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";
  }
}

// Prevent form submission for now
document.getElementById("myForm").onsubmit = function(event) {
  event.preventDefault();
  // You can add form submission logic here
}