js带确定和取消按钮代码
在JavaScript中创建一个带有确定和取消按钮的对话框，可以使用原生的alert、confirm和prompt方法，但这些方法的样式和功能有限。为了创建一个更自定义的对话框，可以使用HTML、CSS和JavaScript的组合。以下是一个简单的示例：
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Dialog</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button onclick="showDialog()">Show Dialog</button>
<div id="dialog" class="dialog">
<div class="dialog-content">
<p>Are you sure you want to proceed?</p>
<button onclick="confirmAction(true)">OK</button>
<button onclick="confirmAction(false)">Cancel</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>CSS部分（styles.css）
.dialog {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
justify-content: center;
align-items: center;
}
.dialog-content {
background: white;
padding: 20px;
border-radius: 5px;
text-align: center;
}JavaScript部分（script.js）
function showDialog() {
document.getElementById('dialog').style.display = 'flex';
}
function confirmAction(confirmed) {
document.getElementById('dialog').style.display = 'none';
if (confirmed) {
alert('You clicked OK!');
// 在这里添加确认后的逻辑
} else {
alert('You clicked Cancel!');
// 在这里添加取消后的逻辑
}
}解释
- HTML: 创建了一个按钮来触发对话框的显示，并定义了对话框的结构。
- CSS: 设置了对话框的样式，使其在屏幕上居中显示，并添加了一个半透明的背景遮罩。
- JavaScript: 定义了显示对话框和处理用户选择的函数。
优势
- 自定义样式: 可以根据需要设计对话框的外观。
- 灵活性: 可以添加更多的交互逻辑，如表单验证、异步操作等。
- 用户体验: 提供更符合应用风格的交互体验。
应用场景
- 确认操作: 在执行重要操作前获取用户的确认。
- 提示信息: 显示重要信息并请求用户反馈。
- 表单提交: 在提交表单前确认信息的准确性。
通过这种方式，你可以创建一个既美观又实用的对话框，以满足不同的应用需求。
相关·内容
我正在尝试使用Electron.js对话框showMessageBoxSync创建一个消息框。我希望按钮是‘取消’和‘覆盖和继续’。我希望当按钮为“取消”和“确定”时，它以与框相同的方式显示。当按钮为“取消”和“确定”时，按钮将并排显示：但是，当我尝试将按钮设置为“取消”和“覆盖<
浏览 1提问于2020-11-08得票数 0
回答已采纳
1回答
嗨，我所有的工作都是角js，我想在单击删除按钮时添加确认消息。>Delete</a>
这将显示“确定”和“取消”按钮和“确认”框，如果单击“确定”按钮，它将进入下一个进程，但如果单击“取消”按钮，则与“到同一进程确认”框没有隐藏相同(“确定”按钮将返回“真”，但“取消”按钮将返回“真”而不是“假”)。
浏览 4提问于2013-10-15得票数 0
回答已采纳
1回答
如何从提交按钮将操作导出到两个不同的部分？我想要取消按钮带我到一页，接受按钮带我到另一页。如何应用采取不同操作的条件？
我的按钮是接受和取消..。
浏览 1提问于2020-05-04得票数 1
回答已采纳
1回答
我们有一个Chrome扩展下载按钮在我们的网站上。
这张图片显示了我指的弹出窗口。它工作正常，除了取消按钮打开一个新的选项卡，并带您到插件铬存储页面。chrome.webstore.install(webStoreURL, () => null, (error, errorCode) => {
window.o
浏览 5提问于2016-05-09得票数 1
回答已采纳
我有一个带编辑按钮的html表格。点击“编辑”创建一个带有javascript的表单。我使用jquery来隐藏带有"Edit“的行。现在，我正在尝试使用Cancel按钮来处理此问题。如果你点击“取消”，它会将行放回表格中(这很容易)，但它也会隐藏表单。在任何一行上按“编辑”，然后在表单中按“取消”。它确实带回了行，但我不确定如何隐藏表单。
任何帮助都是非常感谢的。
浏览 1提问于2011-12-10得票数 0
回答已采纳
1回答
确定和取消按钮不显示
、、、、
为什么我的“确定”和“取消”按钮没有出现在UI屏幕上？我看到了表单、标签和文本框，但看不到Cancel和OK按钮。“确定”和“取消”按钮。
我在这里使用的所有这些大小都是经过反复试验的，因为我在Visual C# 2010UI控件方面没有太多经验。
浏览 2提问于2013-07-16得票数 0
回答已采纳
1回答
jconfirm插件当我使用鼠标时，它返回实际值，即按下OK或Cancel按钮时是真或假，但是当我使用Tab键并将焦点放在cancel上，然后按Enter键时，它实际上将其视为OK，现在如何停止它。
浏览 2提问于2014-09-25得票数 0
当用户离开页面时，我使用Alertify js 1.6.1来显示对话框。除了确定和取消，我需要添加一个额外的按钮“继续”在警报js确认对话框。是否有添加自定义按钮功能的方法？
浏览 4提问于2016-03-15得票数 3
回答已采纳
当使用XrmToolBox的SubArea编辑器创建新的SiteMap时，我希望删除自动创建的带状。有人知道怎么做吗？
浏览 7提问于2015-10-19得票数 1
回答已采纳
我有一台带UITableView的UIViewController。当用户取消自定义ActionSheet (通过按下Done按钮)时，ActionSheet将被取消，所选项目的值将传递回UIViewController以进行显示。
我有点不确定处理这件事的最好方法。
浏览 0提问于2012-10-16得票数 1
回答已采纳
1回答
我正在构建一个管理仪表板与引导3，并需要一个“查看更多”按钮，以取消一些内容。下面的代码可以很好地工作，但是在页面加载时，我们会在动画发生时看到折叠内容。在这里可以找到小提琴：<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<scr
浏览 6提问于2014-03-11得票数 2
回答已采纳
我在向导中有一个非常长的表单，一些用户太习惯于使用浏览器的后退和前进按钮，以至于他们使用这些按钮而不是表单向导上的“后退”和“下一步”按钮。如果他们点击浏览器的后退按钮，他们将丢失所有的表单数据(这是一个痛苦的臀部，因为表单太长了)。是否可以显示一个警告，说明何时会有一个“带我离开这里”按钮和一个“取消”按钮，所以如果他们点击“取消”，它将取消后退按钮</
浏览 0提问于2010-06-14得票数 10
回答已采纳
3回答
我知道这可能是一个简单的问题，但是在不自动生成数据连接的情况下，是否有更容易将CSV导入Excel的方法？
注意:我想将它直接导入到光标位置的工作表中(就像通过数据连接导入时一样)，而不是打开另一个文件(在这里它会打开一个新的工作表)。
浏览 5提问于2014-06-05得票数 4
这是一个问题，因为我想更改一些“确定”和“取消”按钮的文本，如下所示：[Cancel] Hủyif
浏览 1提问于2013-10-28得票数 0
我需要显示弹出消息(类似于Alertify.js的“确认”功能的结果)，并在用户关闭弹出窗口后无条件地刷新屏幕，无论是通过'X‘还是'OK’按钮完成。基本上，Alertify.js提出的“确认”功能符合我的需要，除了它的“取消”按钮(因为在用户点击它之后，它什么也不做)。如果我能以某种方式摆脱取消按钮，那就太好了，但我不确定该怎么做，或者我是否能做到这一点。你对这个问题有什么建议？我试过这个代码，
alert(&q
浏览 5提问于2019-11-28得票数 1
1回答
每个对话框都有一个“保存”和“取消”按钮。当用户按下键盘上的"Enter“时，我想自动”按下“"Save”按钮。当用户按下键盘上的"Esc“时，我想模拟单击"Cancel”按钮。
浏览 1提问于2011-11-05得票数 7
回答已采纳
2回答
我需要Qt对话与确定和取消按钮的标准功能，放置在其布局的右侧。我需要继承它并将其他小部件添加到它的布局中。我可以自己实现它，但可能有一些标准，在这种情况下，我更喜欢使用它，因为它会更容易移植。QMessageBox会显示一条消息，我需要更通用的东西，只需要QDialog和标准按钮，或者QDialog有一个激活它们的选项。
浏览 27提问于2013-06-19得票数 5
回答已采纳
1回答
我正在使用import TimePicker from '@mui/lab/TimePicker';时间选择器，我需要手动确认或取消选择的能力。在中，我看到了cancelText和okText选项，但是没有能力显示这些按钮(showToolbar与此无关)。也许我漏掉了什么东西，有人能帮帮我吗？
浏览 4提问于2022-03-07得票数 1
我想要一个包含用户名，电子邮件id等信息的弹出框点击提交按钮和确定和取消按钮，以确认与JAVA脚本。单击“提交”按钮，使用“确定”和“取消”显示注册信息，即可.how到新窗口的代码JavaScript。
浏览 0提问于2012-09-07得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
腾讯会议
云直播
对象存储活动推荐
腾讯云开发者
