开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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: 定义了显示对话框和处理用户选择的函数。

优势

自定义样式: 可以根据需要设计对话框的外观。
灵活性: 可以添加更多的交互逻辑，如表单验证、异步操作等。
用户体验: 提供更符合应用风格的交互体验。

应用场景

确认操作: 在执行重要操作前获取用户的确认。
提示信息: 显示重要信息并请求用户反馈。
表单提交: 在提交表单前确认信息的准确性。

通过这种方式，你可以创建一个既美观又实用的对话框，以满足不同的应用需求。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

uni-app点击按钮弹出提示框-uni.showModal(OBJECT),选择确定和取消

id=showmodal 显示模态弹窗，可以只有一个确定按钮，也可以同时有确定和取消按钮。类似于一个API整合了 html 中：alert、confirm。...: '这是一个模态弹窗', success: function (res) { if (res.confirm) { console.log('用户点击确定...'); } else if (res.cancel) { console.log('用户点击取消'); } } }); test.vue...'); } else if (res.cancel) { console.log('用户点击取消'...} }); }, }, } 效果：点击按钮的时候

15.4K7 0

利用JS代码批量自动取消抖音关注

在很多时候我们抖音关注的人太多，想要批量取消但是一个一个点击太麻烦了，如何解放双手批量取消关注呢？今天分享一段JS代码，如何在线批量取消关注，需电脑才能操作！...截图演示截图首先我们需要登录抖音创作服务平台:链接直达右键或按F12进入审查元素->点击Console->在空白处粘贴以下代码回车键即可！...\u7a7a\u6728\u767d\u535a\u5ba2\u002d\u0077\u0075\u007a\u0075\u0068\u0075\u0061\u002e\u0063\u006e") “代码和教程需要使用电脑才可以操作

8.4K0 1

js带模糊效果的隐藏滑动侧边栏代码教程

简要教程 pushbar.js是一款带模糊效果的js隐藏滑动侧边栏插件。pushbar.js能制作上下左右四个方向的滑动侧边栏效果，并且在侧边栏菜单显示的时候，主页面会带有炫酷的模糊特效。...使用方法在页面中引入pushbar.js和pushbar.css文件。... js/pushbar.js"> HTML结构该js..."> Bottom js...带模糊效果的隐藏滑动侧边栏插件 Tiny javascript plugin for creating sliding drawers in web apps <div

6.2K4 0

【代码艺术】带视觉特效的js密码强度检测开源库

这是一款带视觉特效的js密码强度检测特效。该特效在用户输入密码的时候，随着密码强度的增强，旁边的图像会越来越清晰或越来越模糊，通过图像的变化来提示用户密码的强度。...由于该js密码强度检测特效的编写使用了CSS变量，所以不是所以浏览器都支持该特效，请使用支持CSS变量的浏览器来查看演示效果。下面是该js密码强度检测特效的gif动态效果图。 ?...代码解释 css代码： article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display...: js/imagesloaded.pkgd.min.js"> js/zxcvbn.js"> js/demo1.js"> 作者 | 思齐 | 蚂蚁开源社区大神，资深前端工程师

2.9K2 1

【ace.js】网页版代码智能提示，带高亮编辑器

背景纯粹为了在自己博客实现一个代码编辑器，方便在线测试各种代码。 ace介绍 ACE 是一个开源的、独立的、基于浏览器的代码编辑器，可以嵌入到任何web页面或JavaScript应用程序中。...到目前版本，它支持了超过120多种的语法高亮，超过20多种主题等，在编辑器方面也支持多种操作，包括提示等，算是一个基于web端的代码编辑器了。，并能够处理代码多达400万行的大型文档。...ACE开发团队称，ACE在性能和功能上可以媲美本地代码编辑器（如Sublime Text、TextMate和Vim等）。详细API和demo可查阅官网。步骤 1.编写代码编辑器样式 ?...2.引入ace.js js"> 3.具体示例 <!

6K1 0

纯代码给 WordPress 文章编辑器上增加 Prism.js 代码高亮的快捷按钮

之前发过文章说过：使用 Prism.js 实现漂亮的代码语法高亮，本博客也使用的是它直接写代码发布的话，灰茫茫一片，很丑，所以有了 Prism.js 引用的代码片段就变得有了好看的样式但是作为技术博客，每篇文章基本上都会有代码，而 Prism 使用语义化的元素和元素来标记代码区块，每次都要手动敲的话还是很麻烦的所以这篇文章就是一个小技巧，怎么在 WordPress...文章编辑器上增加 Prism.js 代码高亮的快捷按钮打开你的 functions.php 文件，加入以下代码 // 自定义代码高亮按钮 function appthemes_add_quicktags...WordPress 文章编辑器上增加 Prism.js 代码高亮的快捷按钮直接点击编辑器上的按钮，就可以添加对应的片段，不用每次费事的一个一个敲了沈唁志，一个PHPer的成长之路！...原创文章采用CC BY-NC-SA 4.0协议进行许可，转载请注明：转载自：纯代码给 WordPress 文章编辑器上增加 Prism.js 代码高亮的快捷按钮

2.4K1 0

JS代码和网页的混用

今天写一个代码，遇到这个情况：大的DIV嵌了一个小的DIV，大的DIV的宽度我是通过复杂的机制替换完成，现在小的div需要显示边框，但它又不能使用大的DIV的宽度和高度，必须要稍小一点（BOX模型）。...我又不想再增加处理的复杂度，尝试着用JS来完成这种关系。

8.8K10 0

js中三种弹出框

，可以利用这些对话框来完成js的输入和输出，实现与用户能进行交互的js代码。...alert()是js的window对象的一个方法，调用时可以写成window.alert()，也可以写成alert()，功能都是产生一个带确认按钮的对话框，上面显示括号内的信息，第二种：confirm...单击“确认”或“取消”按钮都是关闭对话框，似乎没有什么区别，实际上，无论是单击“确认”或“取消”按钮都会返回一个布尔值，这样就可以再幕后有一些js代码来发挥按钮的作用，请大家看下面的例子，体会使用confirm...当警告框出现后，用户需要点击确定按钮才能继续进行操作。语法：alert(“文本”)。确认框confirm() confirm是确认框，两个按钮，确定或者取消，返回true或false。...当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。

9.7K5 0

接口测试平台代码实现37:接口请求的保存和取消

要如何存储和展示是需要进行特殊设计的，类似加密和解密，压缩和解压缩。...打开P_apis.html，先把取消功能写了：如图在底部位置新增一个script，用来存放之后数个调试弹层的函数，请大家认真选好位置，因为本页面的后续div和script会非常非常多，如果不按照顺序和位置紧贴着写...然后给取消按钮的onclick的属性写成这个ts_close函数。启动服务，刷新页面试一下：发现已经可以成功关闭这个弹层了。接下来我们写一个funciton,用来保存接口设置。...id=ts_method 然后在js函数中直接获取select的value即可：然后是url：然后是host：然后是请求体header：好了，我们已经把简单的都写完了，我们加一个输出...，来显示一下，用来检测我们之前写的这一大堆代码有没有问题：这里我们用alert 和 console.log都可以。

5133 0

取消Android Studio更新提示和断网实现快速编译运行代码

取消Android Studio 中的联网操作在android studio中的settings/Appearance&Behavior/System Settings/Updates 中取消勾选...使用本地gradle和offline模式，如图所示 File>Settings>Build,Execution,Deployment>Gradle

751 0

接口测试平台代码实现25:项目列表页的新增功能

本节主要来实现新增一个项目的功能：我的设计是：点击新增按钮，出现一个弹层，这个弹层上有输入框，要求用户输入项目的名称。还有确定/取消按钮。...这个弹层默认是隐藏的一个div，当点击新增按钮后，修改该弹层的隐藏属性为显示。当点击确定/取消按钮后，再把弹层的隐藏属性变为隐藏。点确定的时候，会发送给后台一个异步请求，带着用户写的新项目名字。...然后我们要给它添加一个输入框和俩个按钮：看看效果现在我们要让取消按钮生效：取消按钮：点击后修改这个div的隐藏属性为隐藏，所以要给这个div加个id以便定位：id="add_project_div..." 因为取消按钮要执行的js语句只有一句，我们可以偷懒直接写在onclick属性中，而不需要先写个js函数，然后onclick再调用这个函数。...下一节我们讲这个项目的详情页的框架构造和进入按钮功能。大家代码可能有这样那样的问题，当解决不了的时候可以留言询问留言板，或者直接下载本系列教程中的这个项目代码的打包，解压到本地对比一下。

9953 0

JS代码格式化和语法着色

有时为了研究学习一些格式不规范的JS代码段，需要将代码段格式化一下，这样思路就会清晰多了，网上找到此款格式化的工具，将以下代码保存为html格式文件即可使用 JSer...; } Input JS... Please Input the JS: document.write('<script type="text/javascript" src="/js/flashobject.js">&...弹出输入对话框，在A区域粘贴要格式化的JS代码，然后OK： ?

5.4K6 0

文章目录扩展默认的 JS 代码和 CSS 代码

WPJAM Basic 的文章目录扩展，很多人用了之后，为了适应自己的主题，就修改默认的 JS 和 CSS 代码，但是一不小心改错了，显示不正确，人生就那么悲催，哈哈。...那么这里提供一下默认的 JS 代码和 CSS 代码，让你可以恢复到默认。...文章目录扩展默认的 JS 代码 jQuery(document).ready(function(){ jQuery('#toc span').on('click',function(){ if...} jQuery('#toc ul').toggle(); jQuery('#toc small').toggle(); }); }); 文章目录扩展默认的 CSS 代码

5333 0

前端SweetAlter弹窗js的使用

并且，是全js操作，也即不用再html写任何标签。...官网 Sweetalter官网是：https://sweetalert.js.org/docs/ 也有中文网【注意不是官网，我不确定他是不是官网】，但是我觉得文档有问题，所以这里只放了英文官网，可以自行搜索中文网...安装 sweetalter是支持npm和浏览器端两种方法的。...swal({ text: '你好，欢迎访问迷思雨 misiyu.cn' }) 带按钮 ?..., icon: 'warning', buttons: ['取消', '确定'] }); 简单确认删除交互示例 sweetalert是支持Promise 具体可参考这篇文章：https:

5.7K3 0

python测试开发django-155.bootbox使用(alertconfirmpromptdialog)

我这里用的Bootstrap3，下载bootbox.js 和 bootbox.locales.js两个文件 bootbox.js 下载地址https://github.com/makeusabrew/bootbox...// alert 基本的用法 bootbox.alert("Your message here…"); // alert message消息可以带HTML bootbox.alert...console.log("点ok后执行这里") } else { /* Cancel执行这里*/ } } }) 设置buttons 按钮文字和颜色...还确定在背景上单击是否消除模态。 closeButton 类型: Boolean 对话框是否应具有关闭按钮（x）或不。...语言环境设置用于转换三个标准按钮标签：OK, CONFIRM, CANCEL buttons 类型: Object 按钮定义为JavaScript对象。

3K2 0

如果我要再加一个删选条件过滤掉带“已取消”字样的，应该怎么加代码呀？

后来【瑜亮老师】给了一个示例代码，如下所示： for i in result: if "摘要" not in i[""] and "已取消" not in i[""]: do something...这篇文章主要盘点了一个Python处理的问题，文中针对该问题，给出了具体的解析和代码实现，帮助粉丝顺利解决了问题。...最后感谢粉丝【Jun】提问，感谢【论草莓如何成为冻干莓】、【瑜亮老师】给出的思路和代码解析，感谢【Python进阶者】、【磐奚鸟】等人参与学习交流。...大家在学习过程中如果有遇到问题，欢迎随时联系我解决（我的微信：pdcfighting），应粉丝要求，我创建了一些高质量的Python付费学习交流群和付费接单群，欢迎大家加入我的Python学习交流群和接单群

1041 0

带掩码的自编码器MAE详解和Pytorch代码实现

Facebook AI的kaiming大神等人提出了一种带掩码自编码器(MAE)²，它基于(ViT)³架构。他们的方法在ImageNet上的表现要好于从零开始训练的VIT。...在本文中，我们将深入研究他们的方法，并了解如何在代码中实现它。带掩码自编码器(MAE) 对输入图像的patches进行随机掩码，然后重建缺失的像素。MAE基于两个核心设计。...在解码器的末端，有一个由norm层和前馈层组成的分类器。...论文中还包括对下游任务和各种消融研究的迁移学习实验的基准结果。有兴趣的可以再看看原论文。讨论如果您熟悉 BERT，您可能会注意到 BERT 和 MAE 的方法之间的相似之处。...例如，过去对图像自监督的尝试使用堆叠去噪自编码器和图像修复作为pretext task。MAE 本身也使用自动编码器作为模型和类似于图像修复的pretext task。

3.6K3 0

关于安卓开发使用AlertDialog实现按钮对话框

AlertDialog 类的功能非常强大，它不仅可以生成带按钮的提示对话框，还可以生成带列表的对话框。...使用AlertDialog实现对话框建一个layout文件 alert.xml 添加一个按钮命名为:显示带取消中立确定按钮的对话框建一个activity AlertDialog_lianxi.java...="wrap_content" 4 android:layout_height="wrap_content" 5 android:text="显示带取消。...中立、确定按钮的对话框" /> activity中关键代码 1 @Override 2 public void onClick(View v) { 3 // TODO Auto-generated...AlertDialog.Builder builder = new AlertDialog.Builder(AlertDialog_lianxi.this); 7 builder.setTitle("显示带取消中立确定按钮的对话框

9389 0

我的Js代码－按钮按下时判断是否选择了最后一行，给出提示

<script language="javascript">

3.6K10 0

AngularDart Material Design 步进器顶

步进器是用于将进度或功能作为导航工具传送的编号指示器 Inputs: legalJumps String 跳转（定义为由“继续/取消”按钮触发的步骤开关）是合法的。...可能的值：'horizontal'和'vertical'（默认值）。 size String 尺寸主题又确定各种步骤标题元素的大小（例如，步骤编号，步骤名称等）。...可能的值：'default'（默认值）和'mini'。 stickyHeader bool 指示列出可用步骤的标题是否应该粘贴到页面顶部。仅适用于带水平割台的踏步机。...cancelHidden bool 是否应在此步骤中隐藏取消按钮。 complete bool 步骤是否完成。当步进器进入下一步时设置此项。...如果事件处理程序调用$ event.cancel（），则不会取消该步骤。 continue Stream> 单击“Continue”按钮时调用。

7232 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭