- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
现在,我有一张卡片供人们添加、编辑或删除设备,并带有后续的 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>
最佳答案
我将 id 添加到您的按钮,此代码用于在单击 id 为“yes-button”的按钮时关闭模式:
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">×</span>
<p>Would you like to delete this device?</p>
<button id="yes-button">Yes</button><button id="no-button">No</button>
</div>
</div>
关于javascript - 使用是/否命令为 Web 创建模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57563526/
编辑 感谢您的所有评论和回答。我很困惑,在尝试不同的答案后我能够解决问题,但现在无法重现问题???我不知道发生了什么事。 我想做的是通过 id 获取一个元素,但是这个 id 中包含多个点,因为 id
我正在尝试对 bool 字段进行是/否选择。默认小部件是复选框输入。但是,如果我使用 Select 覆盖默认小部件,则会得到:NameError: Select is not defined 我认为这
我有一个背景图像,所有 View 中的图像都相同,但导航栏 traslucent 默认设置为 YES 并且背景不均匀。我尝试了各种解决方案,但没有任何改变:( 我的 AppDelegate.h #im
所以我有一个要分析的数据框。问题是数据框中有一堆 1 和 0(1 是,0 是否),而不是是/否。如何修改数据框以使其不是 1 和 0,而是 Yes 和 No,以便我可以使用逻辑回归?我确信有一个我没有
我是 XML/XSL 的新手(比如 2 天新)。我有一行我正在做一个 xsl:value-of 选择,它返回一个 True/False 属性。我想让它显示是/否,但我试图这样做没有成功。下面是我目前的
我正在尝试写一个简单的 do..until循环,它不起作用: $yesNo = Read-Host -Prompt 'Do you want to add alternative DNS names
这个问题已经有答案了: How to use this boolean in an if statement? (8 个回答) 已关闭 7 年前。 import java.util.Scanner;
提示问题生成器 class SynthesisPromptGenerator: def wait_key(self): ''' Wait for a key press on
我想自动给出输入是/否,而不是通过键盘/用户输入。 user_choice = raw_input("Are you sure want to remove all item (y/n):\n") i
我需要在文件存在时向用户显示一些消息,显示消息“文件存在...你想覆盖它吗??” if (File.Exists(binaryFilePath)) { Program.DisplayMessa
我在一个表格中有 5 个问题,其中一些的回答是"is"/“否”。一旦用户选择其中一个按钮,我希望能够切换是和否按钮。我遇到的问题是,如果其中一个问题得到了回答,并且我回答了下一个问题,它会从所有其他问
如何使用 bash 脚本在文本文件的某行/之后搜索字符串? 例如我想搜索第一次出现的 "version:" 字符串,但不是在文件开头而是在第 1 行。说 35 其中包含文本 *-disk:0 这样我就
目前我正在创建一个 Alexa 技能来处理 FAQ 问题和导致直接回复的问题,但我对 alexa 何时需要另一个回复有疑问。 例如,如果用户询问, “我应该吃什么” Alexa 会回复“你想吃意大利面
如果用户反复按下后退按钮,我需要一种方法来检测他们何时处于我的任务/应用程序的最后一个 Activity 并显示“你想退出吗?”在他们返回主屏幕或他们之前运行的任何应用程序之前的对话框。 Hook o
我有一个充满数据的表格,在行的末尾我有一个删除选项。 与其链接到一个全新的页面来确认删除,不如将“删除”链接拆分为一个是/否链接,根据单击的内容,删除行或变回“删除”,这样会很整洁。我知道 reddi
使用一些批处理文件,我想在 Java Keystore 中添加不受信任的自签名证书。 命令是 %JAVA_HOME%/bin/keytool -import -v -trustcacerts -ali
我有一个充满 IP 地址的电子表格(“IP LIST”)。在该工作簿中,我有第二个电子表格代表 IP 地址部分,该部分属于 IP 地址的较大部分中的打印机(“打印机”)。我已经在“IP LIST”上确
一旦用户单击"is"并在输入框中输入一个值,但改变主意并单击“否”选项,但输入值仍然存在,如何删除该值 Do you offer rented call center seating on
因此,我尝试验证用户是否输入了"is"或“否”,并继续询问,直到他们输入其中之一。这是我到目前为止的代码。 System.out.println("Would you like a Diamond i
我目前正在关注 Erik Roberts 所著的《Java 的艺术与科学》一书。当在代码中测试是/否/替代答案时,我会因为没有答案而被问两次。 /* * File: YesNoQuestion.ja
我是一名优秀的程序员,十分优秀!