How to create a dialog with “Yes” and “No” options in JavaScript?

General Discussions
, ,
3

Hey! @Shielagaa :wave:

If you’re looking for a cleaner, more custom approach than the default confirm() dialog, this solution worked well for me!

For a more customized dialog with “Yes” and “No” buttons, you can create a modal-like dialog with HTML and use JavaScript to show/hide it:

<div id="myModal" style="display:none; background-color: rgba(0,0,0,0.5); padding: 20px;">
  <div style="background: white; padding: 20px; text-align: center;">
    <p>Are you sure you want to save the data?</p>
    <button onclick="confirmAction()">Yes</button>
    <button onclick="closeModal()">No</button>
  </div>
</div>

<button id="myButton">Save Data</button>

<script>
document.getElementById("myButton").onclick = function() {
  document.getElementById("myModal").style.display = "block"; // Show the modal
};

function confirmAction() {
  console.log("Data saved!");
  document.getElementById("myModal").style.display = "none"; // Close the modal
}

function closeModal() {
  console.log("No action taken.");
  document.getElementById("myModal").style.display = "none"; // Close the modal
}
</script>

Custom modals allow more flexibility for design and UI behavior, so you can style it to fit your needs.