Creating a modal with yes/no commands for web

Question

Right now, I have a card for people to add, edit, or delete a device, with subsequent FAS font-awesome icons. Basically, I want to know how to create a popup command or option for when someone clicks one of these icons. For example, if someone one were to click a "delete" symbol, a popup that would include text, yes, and no buttons. Where I am stuck is trying to make the modal close with the yes and no buttons, and how to submit information for the yes command. Separately, I am trying to change the styling (border, background color) of the buttons and getting stuck.

Currently, an example of my code can be accessed w3schools.com-- https://www.w3schools.com/code/tryit.asp?filename=G77OAKK28TTH

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

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

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

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

body {
  font-family: Arial, Helvetica, sans-serif;
}


/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}


/* Modal Content */

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}


/* The Close Button */

.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

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

<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Would you like to delete this device?</p>
    <button>Yes</button><button>No</button>
  </div>
</div>

A HTML popup is ultimately just a div with a high z-index and maybe some absolute (or fixed) positioning, and its display property initially set to none. (To make a popup appear to be modal you also need an extra overlay div behind it covering the whole screen with a transparent background, so nothing else can be clicked.) So all you need to do to show such a div is change its display property back to block. And all you need to do to react when an image is clicked is attach a "click" event handler to the image. Hopefully that's enough info for you go and do some more research. — ADyson, Aug 20 '19 at 00:00
P.s. if you have some code which you tried, but it failed in some way (which it sounds like you might have such code) please show it then a)we know you made an effort before asking others to solve it and b) you might not be that far away from getting it to work, so then we can fix it for you instead of starting from scratch or giving you general hints. — ADyson, Aug 20 '19 at 00:02
If you are using bootstrap, try this documentation regarding modals [link](https://getbootstrap.com/docs/4.0/components/modal/) instead of creating one from scratch. — ryanc, Aug 20 '19 at 04:47
@ADyson I recently changed my question and added more simplified code. I figured out how to create a modal button using the icons I have, but now am stuck when it comes to figuring out how to use the yes/no buttons I have created to close my modal. — Emma Chisholm, Aug 20 '19 at 16:48
@ADyson I have also looked at this older post for styling clarification, so mainly need help with close functions. https://stackoverflow.com/questions/35185974/font-awesome-icon-with-an-onclick-event-set — Emma Chisholm, Aug 20 '19 at 16:51
so, basically you'll just close the modal when the `No` button is pressed and execute a function (`AJAX` call or something) when the `Yes` button is pressed (also closing the modal) ? Am I at the right track. — ThS, Aug 20 '19 at 17:09
Yes you are on the right track! I just don't know how to format the ajax function- everything I know about ajax is from here. I know its supposed to be like $.ajax({name:value, name:value, ... }), but I don't know how that would fit with the code I've already created. https://www.w3schools.com/jquery/ajax_ajax.asp — Emma Chisholm, Aug 20 '19 at 17:43
I have added a functioning example that can be edited here-I just don't know how to add ajax function https://www.w3schools.com/code/tryit.asp?filename=G77OAKK28TTH — Emma Chisholm, Aug 20 '19 at 17:49
ok so the next step is to give those yes/no buttons IDs, and then that means you can identify them in the javascript and attach "onclick" events to them (similar to the `btn.onclick` which you already have) — ADyson, Aug 20 '19 at 21:23

score 0 · Accepted Answer · answered Aug 21 '19 at 14:39

I added id's to your buttons and this code to close the modal when the button with id "yes-button" is clicked:

document.getElementById("yes-button").onclick = function() {
  modal.style.display = "none";
}

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

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

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

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

// Close modal when button with id "yes-button" is clicked
document.getElementById("yes-button").onclick = function() {
  modal.style.display = "none";
}

body {
  font-family: Arial, Helvetica, sans-serif;
}


/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}


/* Modal Content */

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}


/* The Close Button */

.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

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

<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Would you like to delete this device?</p>
    <button id="yes-button">Yes</button><button id="no-button">No</button>
  </div>
</div>

Creating a modal with yes/no commands for web

1 Answers1