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

Question

现在，我有一张卡片供人们添加、编辑或删除设备，随后带有 FAS 字体很棒的图标。基本上，我想知道如何为某人单击这些图标之一创建弹出命令或选项。例如，如果有人要单击“删除”符号，则会弹出一个包含文本、是和无按钮的弹出窗口。我被卡住的地方是尝试使用 yes 和 no 按钮关闭模态，以及如何为 yes 命令提交信息。另外，我正在尝试更改按钮的样式（边框、背景颜色）并被卡住。

目前，我的代码示例可以访问 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;

}