使用是/否命令为网络创建模态

Question

现在，我有一张卡片供人们添加、编辑或删除设备，随后带有 FAS 字体很棒的图标。基本上，我想知道如何为某人单击这些图标之一创建弹出命令或选项。例如，如果有人要单击“删除”符号，则会弹出一个包含文本、是和无按钮的弹出窗口。我被卡住的地方是尝试使用 yes 和 no 按钮关闭模态，以及如何为 yes 命令提交信息。另外，我正在尝试更改按钮的样式（边框、背景颜色）并被卡住。目前，我的代码示例可以访问 w3schools.com-- https://www.w3schools.com/code/tryit.asp?filename=G77OAKK28TTH// Get the modalvar modal = document.getElementById("myModal");// Get the button that opens the modalvar btn = document.getElementById("myBtn");// Get the <span> element that closes the modalvar 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 modalspan.onclick = function() {  modal.style.display = "none";}// When the user clicks anywhere outside of the modal, close itwindow.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;}