कैसे डिलीट मोडल बनाएं

पहला कदम - HTML जोड़ें:

ऑपन मोडल खोलें
<div id="id01" class="modal">
  ×
  <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>

दूसरा कदम - CSS जोड़ें:

* {box-sizing: border-box}
/* सभी बटन को स्टाइल सेट करना */
button {
  background-color: #04AA6D;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}
button:hover {
  opacity:1;
}
/* रद्द और डिलीट बटन को फ्लॉट कर और समान चौड़ाई जोड़ा */
.cancelbtn, .deletebtn {
  float: left;
  width: 50%;
}
/* रद्द बटन को रंग जोड़ा */
.cancelbtn {
  background-color: #ccc;
  color: black;
}
/* डिलीट बटन को रंग जोड़ा */
.deletebtn {
  background-color: #f44336;
}
/* कंटेनर को आंतरिक पैडिंग और टेक्स्ट को मध्यस्थ स्थानांतरित करना */
.container {
  padding: 16px;
  text-align: center;
}
/* मॉडल (पृष्ठभूमि) */
.modal {
  display: none; /* डिफ़ॉल्ट में छुपा हुआ */
  position: fixed; /* ठीक जगह पर फिक्स्ड */
  z-index: 1; /* शीर्ष पर रखा */
  left: 0;
  top: 0;
  width: 100%; /* फुल चौड़ाई */
  height: 100%; /* फुल ऊंचाई */
  overflow: auto; /* ज़रूरत पड़ने पर रोल को सक्षम करें */
  background-color: #474e5d;
  padding-top: 50px;
}
/* मॉडल सामग्री/बॉक्स */
.modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; /* ऊपर 5%, नीचे 15%, और 5% मध्य में */
  border: 1px solid #888;
  width: 80%; /* आकार अधिक या कम हो सकता है, जैसा कि स्क्रीन आकार बदलता है */
}
/* स्तरांक की शैली सेट करें */
hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}
/* मॉडल बॉक्स बंद करने वाला बटन (x) */
.close {
  position: absolute;
  right: 35px;
  top: 15px;
  font-size: 40px;
  font-weight: bold;
  color: #f1f1f1;
}
.close:hover {
.close:focus {
  color: #f44336;
  cursor: pointer;
}
/* Clear floats */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
/* अति-सूक्ष्म स्क्रीन पर रद्द बटन और विलोपन बटन के शैली को बदलें */
@media screen and (max-width: 300px) {
  .cancelbtn, .deletebtn {
    width: 100%;
  }
}

स्वयं प्रयोग करें

सूचना:आप फिर निम्नलिखित JavaScript कोड का उपयोग करके, मॉडल बॉक्स के बाहर के किसी क्षेत्र पर क्लिक करके मॉडल बॉक्स को बंद कर सकते हैं (केवल "x" या "रद्द" बटन पर क्लिक करके बंद करने के बजाय):

उदाहरण

<script>
// मॉडल बॉक्स प्राप्त करें
var modal = document.getElementById('id01');
// जब उपयोगकर्ता मॉडल बॉक्स के बाहर किसी स्थान पर क्लिक करता है तो, इसे बंद कर दें
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

स्वयं प्रयोग करें