Πώς να δημιουργήσετε ένα παράθυρο διαλόγου διαγραφής;

Βήμα 1 - Προσθήκη HTML:

Άνοιγμα Παραθύρου Μοδού
Παράθυρο Μοδού
  Κλείσιμο Παραθύρου
  <form class="modal-content" action="/action_page.php">
    <div class="container">
      <h1>Delete Account</h1>
      <p>Are you sure you want to delete your account?</p>
      <div class="clearfix">
        <button type="button" class="cancelbtn">Cancel</button>
        <button type="button" class="deletebtn">Delete</button>
      </div>
    </div>
  </form>
</div>

Step 2 - Add CSS:

* {box-sizing: border-box}
/* Set styles for all buttons */
button {
  background-color: #04AA6D;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  πλάτος: 100%;
  opacity: 0.9;
}
button:hover {
  opacity:1;
}
/* Make the cancel and delete buttons float and add equal width */
.cancelbtn, .deletebtn {
  float: left;
  width: 50%;
}
/* Add color to the cancel button */
.cancelbtn {
  background-color: #ccc;
  color: black;
}
/* Add color to the delete button */
.deletebtn {
  background-color: #f44336;
}
/* Add padding to the container and center the text */
.container {
  padding: 16px;
  text-align: center;
}
/* Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed in place */
  z-index: 1; /* Placed at the top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* 启用滚动（如果需要） */
  πλεκτό: auto; /* Ενεργοποιεί τη στήρηση (αν χρειάζεται) */
  πίσω-χρώμα: #474e5d;
}
πλέγμα-κεντρικό: 50px;
/* Περιεχόμενο/φάκελος μοντέλου */
  .modal-content {
  πίσω-χρώμα: #fefefe;
  περίγραμμα: 1px solid #888;
  πλάτος: 80%; /* Το πλάτος μπορεί να είναι περισσότερο ή λιγότερο, ανάλογα με το μέγεθος της οθόνης */
}
/* Ορίζει τον τύπο της οριζόντιας γραμμής */
hr {
  περίγραμμα: 1px solid #f1f1f1;
  μάκρος κάτω από το κουμπί: 25px;
}
/* Κουμπί κλεισίματος του φακέλου μοντέλου (x) */
.close {
  θεση: absolute;
  right: 35px;
  top: 15px;
  μεγεθys γραμματοσειράς: 40px;
  βαθύτητα γραμματοσειράς: bold;
  χρώμα: #f1f1f1;
}
.close:hover {
.close:focus {
  χρώμα: #f44336;
  cursor: pointer;
}
/* Καθαρίζει τα floats */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
/* Αλλάζει τον στυλ των κουμπιών Ακύρωσης και Διαγραφής σε μικροοθόνες */
@media screen and (max-width: 300px) {
  .cancelbtn, .deletebtn {
    πλάτος: 100%;
  }
}

Προσπαθήστε το προσωπικά

Συμβουλή:Μπορείτε επίσης να χρησιμοποιήσετε τον παρακάτω κώδικα JavaScript για να κλείσετε το φάκελο μοντέλου κάνοντας κλικ σε οποιαδήποτε άλλη περιοχή εκτός του περιεχομένου του φακέλου (και όχι μόνο κάνοντας κλικ στο κουμπί "x" ή "Ακύρωση"):

παράδειγμα

<script>
// Αποκτά την τοποθεσία του φακέλου μοντέλου
var modal = document.getElementById('id01');
// Όταν ο χρήστης κάνει κλικ σε οποιαδήποτε άλλη τοποθεσία εκτός του φακέλου μοντέλου, θα το κλείσει
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

Προσπαθήστε το προσωπικά