【发布时间】：2019-08-19 20:28:27
【问题描述】：
现在，我有一张卡片供人们添加、编辑或删除设备，并带有后续的 FAS 字体真棒图标。基本上，我想知道当有人单击这些图标之一时如何创建弹出命令或选项。例如，如果某人要单击“删除”符号，则会弹出一个包含文本、是和否按钮的弹出窗口。我被卡住的地方是尝试使用是和否按钮关闭模式，以及如何提交是命令的信息。 另外，我正在尝试更改按钮的样式（边框、背景颜色）并卡住。
目前，我的代码示例可以访问 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">×</span>
<p>Would you like to delete this device?</p>
<button>Yes</button><button>No</button>
</div>
</div>【问题讨论】：
-
此链接可能有助于制作模态：w3schools.com/howto/howto_css_modals.asp 您只需为每个想要弹出模态的 div 添加事件侦听器，并为每个 div 创建一个单独的模态他们。
-
一个 HTML 弹出窗口最终只是一个具有高 z-index 的 div 并且可能有一些绝对（或固定）定位，并且它的显示属性最初设置为无。 （要使弹出窗口看起来是模态的，您还需要在其后面有一个额外的覆盖 div，以透明背景覆盖整个屏幕，因此无法单击其他任何内容。）因此，显示此类 div 所需要做的就是更改其显示属性回块。当单击图像时，您需要做的就是将“单击”事件处理程序附加到图像。希望这些信息足以让您去做更多的研究。
-
附言。如果你有一些你尝试过的代码，但它以某种方式失败（听起来你可能有这样的代码）请展示它然后 a）我们知道你在要求其他人解决它之前做出了努力，并且 b）你可能没有离让它工作还有那么远，所以我们可以为您修复它，而不是从头开始或给您一般提示。
-
如果您使用的是引导程序，请尝试有关模态的文档link，而不是从头开始创建一个。
-
@ADyson 我最近更改了我的问题并添加了更简化的代码。我想出了如何使用我拥有的图标创建一个模式按钮，但现在在弄清楚如何使用我创建的是/否按钮来关闭我的模式时遇到了困难。
标签： javascript jquery html css