开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js怎么写div实现弹出确认框效果

在JavaScript中，可以通过创建一个div元素并设置其样式来实现一个自定义的弹出确认框效果。以下是一个简单的示例：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Confirm Box</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button id="confirmBtn">Click me</button>
    <div id="customConfirmBox" class="confirm-box">
        <div class="confirm-box-content">
            <p>Are you sure?</p>
            <button id="yesBtn">Yes</button>
            <button id="noBtn">No</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS部分（styles.css）

.confirm-box {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    justify-content: center;
    align-items: center;
}

.confirm-box-content {
    background: white;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
}

JavaScript部分（script.js）

document.getElementById('confirmBtn').addEventListener('click', function() {
    document.getElementById('customConfirmBox').style.display = 'flex';
});

document.getElementById('yesBtn').addEventListener('click', function() {
    alert('You clicked Yes!');
    document.getElementById('customConfirmBox').style.display = 'none';
});

document.getElementById('noBtn').addEventListener('click', function() {
    alert('You clicked No!');
    document.getElementById('customConfirmBox').style.display = 'none';
});

解释

HTML部分：定义了一个按钮和一个用于显示确认框的div。
CSS部分：设置了确认框的样式，使其在默认情况下不可见，并且居中显示。
JavaScript部分：
- 当点击按钮时，显示确认框。
- 当点击“Yes”或“No”按钮时，隐藏确认框并执行相应的操作。

优势

自定义样式：可以根据需要自定义确认框的外观和行为。
灵活性：可以轻松添加更多的交互逻辑和样式变化。

应用场景

用户确认操作：在执行重要操作（如删除数据）前，需要用户确认。
表单提交确认：在提交表单前，确认用户输入的信息。

遇到的问题及解决方法

确认框显示位置不正确：可以通过调整CSS中的justify-content和align-items属性来确保确认框居中显示。
确认框无法隐藏：确保JavaScript中正确设置了display: none。

通过这种方式，你可以创建一个简单且灵活的自定义确认框，以满足不同的应用需求。

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

有帮助

没帮助

相关·内容

DIV+JS+CSS实现点击弹出图片效果

前几天扒了vue vlog的官网，想给添加一个像博客一样的点击微信图标弹出公众号二维码。...ZMKI VLOG: VLOG.ZMKI.CN 效果如下: 图片 #代码 CSS代码 .black_overlay { display: none...的相对层，数字大的在上层 */ overflow: auto; } Select Code Copy js代码 ...class="top_contact_us"> div class="top_telphone">div> div class="top_weixin">官方QQ群div> div> div id="light_qq" class="white_content

26.2K3 0

使用easydrag实现可拖动的DIV弹出框

easydrag极大的方法我们实现div弹框这个功能，使我爱不释手！在没遇到easydrag插件之前，想实现一个弹出框并不是一件轻而易举的事情！...废话少说，先看效果： ? 全部代码： easydrag实现可拖动的DIV弹出框 /* 重置浏览器默认样式 */ body,h1...popbox').fadeIn(); $('#popbox').setHandler('handler'); $('.close').click(function(){ //淡出效果来隐藏弹出的...打开弹出框 div id="popbox" class="box"> div class="head" id="handler"><b class="close

2.3K6 0

js单击输入框后弹出提示信息效果

大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" /> 单击输入框后给出提示效果，sky整理收集。 js特效，本站收集大量高质量js代码，还有许多广告代码下载。...zzjs.net，站长js特效。 js特效，提供许多广告代码下载，网址：www.zzjs.net，zzjs@msn.com,用.net打造靓站--> div class="form">...> div> div> 运行效果： ?

11.1K5 0

用js实现一个div弹出图层

用js实现一个弹出图层，具体效果：点击按钮后弹出图层，图层处于页面中间、带有阴影的圆角边框、图层中有input、提交按钮、关闭按钮、标题，弹出后背景页面不可点击、背景变灰。... div class="overlay" id="overlay"> div class="popup"> 弹出图层提交 div class="close" id="close-popup">×div> 实现的，当用户单击关闭按钮时，它将隐藏弹出框并将背景页面状态还原。...如果想隐藏JS功能逻辑，可用JShaman对JS代码进行混淆加密，加密后的代码是密文状态，不可读、不可分析。

7.4K5 0

原生JS实现Tab切换效果和模态框效果

原生JS实现Tab切换效果效果展示 <!...tabPanels[index].classList.add('active'); } }) 原生JS...实现模态框效果效果展示 div class="modal"> 我是标题 div class="detail">...class="btn cancel">取消 div> div> var btn = document.getElementById

9.8K5 0

js写时钟实现钟摆效果，js制作动态时钟特效

doctype html> 简洁的js时钟效果 js"> body { background-color...div class="string1">div> div class="string2">div> div class="string3">div> div class...="ringbit">div> div class="ring">div> div class="panel">div> div class="hour">div...> div class="minute">div> div class="second">div> div class="pin">div> div class

4855 1

原生js实现div跳动效果---很多炫酷效果的基本原理

效果预览： ? 这块实现起来很简单，原生的js实现更简单。为什么写这个呢？...因为这个其实是很多网页动态效果的一个原型，不管是什么大型的网站，其实底层的原理都是一样的，基本思路是，画出DIV，然后载入页面的时候加载到每一个div元素，然后就是控制鼠标的事件，移入和移出的时候执行偏移函数...: darkolivegreen;" name="div">div> div style="background-color: darkblue;" name="div">div> div...style="background-color: crimson;" name="div">div> div style="background-color: gold;" name="div">...，怎么可以那么简单，是的，就是那么的简单，很多的时候我们看到的效果其实实现的原理是很简单的，只是看我们是不是可以巧妙的运用。

1.9K3 0

在WordPress中添加简书风格的连载目录和文章导航

效果就像简书上连载小说的这个东西： ? 思路总体上需要实现的是两部分内容，一个前后文章的链接按钮，一个目录的弹出框。...这个怎么获取呢？最笨的办法就是直接写死。。。但那样也太傻了。一开始走了点弯路，什么异步获取，什么写WP_Query。...第二步添加模态对话框这一步很简单，直接把remodal的JavaScript文件和CSS文件下载下来，扔进子主题的js文件夹里，注册到WordPress里就行了，都不需要在写额外的js文件来初始化或者运行这个插件...当然如果在更复杂的场景里，比如登录框或其他需要一些异步回调的内容，那就需要另写一个js文件来使用了。 ?...对话框和内容都有了，怎么让remodal可以把这个框给弹出来呢？remodal的文档里提供了两种方式，一种是在a标签中使用 #，还有一种是使用 data-remodal-target。

2K2 0

基于Metronic的Bootstrap开发框架经验总结（6）--对话框及提示框的处理和优化

，虽然也可以使用上面的代码来构建一个确认对话框，不过一般情况下不需要这么麻烦的，可以使用插件bootbox的确认对话框来进行处理。...这个效果是引入插件sweetalert（http://t4t5.github.io/sweetalert/）实现的。...3、信息提示框的处理上面两种处理，都是利用弹出对话框进行实现的，而且对界面有阻塞的，一般情况下，我们做信息提示效果，希望它不要影响我们进一步的操作，或者至少提供一个很短的自动消失效果。...下面是我在脚本类里面封装的饿公用方法，用来实现提示效果的显示的。...插件地址是：http://codeseven.github.io/toastr/ 它可以分别创建如下几种效果：警告、危险、成功、提示的对话框信息，效果如下所示。 ? 它的使用JS代码如下所示。

5.2K5 0

智能搜索框实现思路--源码和流程图详解

，简单的把代码写一下！...= old_value || old_value == "") { var autoNode = $("#" + auto); //缓存对象（弹出框）...padding:0 8px;cursor: pointer;"); newDivNode.html(wordNode).appendTo(autoNode); //追加到弹出框...autoNode.show(); } else { //服务器端无内容返回那么隐藏弹出框...，可以根据用户输入的习惯和记录将改js更新，然后将数据倒序排列，这样每一次显示的就是用户之前最后输入的数据可以实现一个比较智能的效果，每一次用户点击输入框的时候触发的是ajax调用的接口

2K1 1

Ajax.BeginForm()知多少

Confirm，就是在提交时会弹出一个确认框，一般不常用。 new AjaxOption(){Confirm:"确认提交？"} HttpMethod，就是设置请求类型，默认为post。...设置Form提交动画加载效果定义加载动态元素，并设置css样式： div#loading { display: none; } div id="loading"> !...; } 如果我想当请求失败时，弹出返回的错误提示并清空form表单怎么办呢？...} 这样实现并没有拿到返回的错误数据，那到底如何传参呢？经过参考jquery.unobtrusive-ajax.js 源码，终于弄清，默认的传参是怎样的。...form表单怎么办呢？】

2.4K6 0

DjangoBlog｜12 博客文章删除功能(优化版)

我们不考虑个人能力问题，我们将原因合并：删除前需要提示用户正在进行删除操作，那这样想，更好的解决方法是，出一个弹框即可，就是当用户点击文章详情页上的删除按钮时，先弹出一个弹框提示用户是否要删除对应文章，...如果不知道怎么实现，我们直接浏览器搜索bootstrap 弹框即可。...> div class="modal-body"> 请问，确认删除文章《{{article.title}}》...> div> div> div> Bootstrap的弹框模块Live demo主要分为两块：效果如下：删除博客弹框模式演示踩坑替换成Bootstrap的弹框模块Live demo后，点击删除按钮无法弹出弹框？

7782 0

新手学JavaScript（三）----超酷消息警告框插件（SweetAlert）

今天给大家推荐一款不错的超酷消息警告框–SweetAlert；SweetAlert是一款不需要jQuery支持的原生js提示框,风格类似bootstrap。...它的提示框不仅美丽动人，并且允许自定义，支持设置提示框标题、提示类型、内容展示图片、确认取消按钮文本、点击后回调函数等。和传统的alert相比： ?...确认输入：点击这里 div> JavaScript ---- 定义js事件： $(function()...- animation 提示框弹出时的动画效果，如slide-from-top（从顶部滑下）等 - html 是否支持html内容。 - timer 设置自动关闭提示框时间（毫秒）。...- imageUrl 定义弹出框中的图片地址。 -

6.5K2 0

借助腾讯混元助手屏蔽简书登录框

实现登陆框的移除查看网页源代码，对比登录框弹出前后，可以看出，当登陆框弹出时，body的style变为了overflow: hidden;；且尾部多了一个div。...如下图：所以如果想要去除登陆框，要做的就是在登陆框弹出时，移除尾部的div，并把body的style改为none。问题是，如何判断登陆框弹出时？...这里采用方法二，因为方法一太麻烦了，而且，如果滚动位置不对，会导致登陆框弹出时，移除尾部div失败。然后问题来了，要怎么用代码实现呢？...而移除尾部div，同样，我们让腾讯混元助手帮我们实现，告诉他使用 js 写一个暴力猴脚本，当body 里 class="__copy-button"的 div后面有新增 div 时，移除那个新增的 div...：图片图片最后最后，借助腾讯混元助手实现了屏蔽简书上不感兴趣的内容，不需要自己会 js，只需要明确自己想做的，然后借助混元助手，就能实现自己想要的效果，魅力就在于此。

2853 0

处理文件上传和怎么处理对象的key和value都是变量的情况

写在前面一直不更行任何的东西，毕竟年终了，项目比较着急，没有什么时间写，我们这老家的天气也着实冷的狠，真的是不想碰笔记本，但是不更新吧也不行，今天简单的说一下几个点，一个是文件上传，一个是怎么处理key...效果图 ? 这个是我我做出来的一个效果图，我们在写的时候呢需要注意几个点....那这个是肯定不对的，怎么办呢？所以这里也是需要我们处理掉的一个点第三就是我们点击取消或者确认按钮的时候其实是将蒙层和当前的弹框一起全部取消掉才是正确的第四是我们上传的时候文件格式的问题。...fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1002; } 这个是遮罩层的样式，也就是我之前提到的弹出框的时候不可以直接弹出来...，还要保证的是后面的不可以点击，这样做出来的效果才是比较理想的一个效果。

9004 0

jquery - 页面弹框 - 阻止事件冒泡示例

需求编写一个简单的页面弹框的示例，功能要求如下：一个点击按钮，点击可以弹出一个弹框弹框固定出现在页面的中间位置需要写一个背景mask，用于遮掩背景，设置透明度0.3 点击弹框外的位置，弹框就可以消失不见...好了，这里已经实现了点击显示的操作了，那么下一步要编写点击弹框的其他部分，则弹框隐藏。编写点击弹框外部，则隐藏 ?...但是，此时点击弹框内也是会让弹框消失的，那如果我要填写弹框的input框来写内容，还没写就消失了，这该怎么办呢？...在这个验证的过程中，更加确认了刚才在.pop使用return false;的确是用来阻止click()的冒泡至$(document)的。...最后，编写弹框右上角的× 号，点击则隐藏弹框因为现在点击弹框都不会隐藏，所以可以单独给#close写一个click()方法，设置触发fadeOut()事件。 ?

3.3K1 0

fullcalendar日历插件的使用并实现增删改查

下面我来说一下我是怎么实现的首先需要导入必须的css和js：实现的，所以我导入了bootstrap的css和js <script src="....endTimeAdd").val(""); //ajax获取班级信息，并展示添加框 $.ajax({ url: '后台controller层查询班级信息的路径',//因为点击日历某个特定日期时，弹出框需要以下拉框的形式显示班级信息...body中写的： //添加课次弹出框代码： div class="modal fade" id="addObjcectInputModalAdd" tabindex="-1"> div class...> div> div> div> //编辑删除课次弹出框代码： div class="modal fade" id="addObjcectInputModalEdit" tabindex

5.5K4 0

小程序-实现自定义动画弹框提示框

前言在小程序中,用户与界面进行交互时,有一些用户反馈提示,例如:触发某个按钮,从底部弹出框,从顶部弹出等如今,有一些现成的 UI 库,虽然已经实现了的,但若只是为了实现一个底部弹出框或者自定义提示框...,不引用第三方 UI 库怎么手动原生方式去实现呢,最主要的是怎么去实现动画 css3 实现动画如下是wxml代码弹出底部弹出框弹出顶部提示框 div> 主要是给想要添加动画的元素添加了一个animation属性,现在的动画是通过js去控制,而非css 如下代码所示 // pages/customalertbox/customalertbox.js...,代码要比 css3 要多一些,可以实现更加复杂的动画效果注意如果是底部弹出框,拖动里面时,若遮罩层底部会跟着滚动,具体解决办法也可以在外层添加catchtouchmove="true"即可解决 <

1.8K3 0

一键自动化博客发布工具,用过的人都说好(公众号篇)

()然后在弹出的对话框中点击确认按钮： ## 点击确认按钮 confirm_button = driver.find_element(By.XPATH, '//div[@class...') zhanshang_button.click()然后在弹出的对话框中，点击确认按钮： ## 点击确认按钮 confirm_button = driver.find_element...合集我们需要先找到合集的可以点击的区域： tag_button = driver.find_element(By.XPATH, '//div[@id="js_article_tags_area...在弹出框中，我们找到tag input，一个个输入，然后点击回车： # 输入标签 tag_input = driver.find_element(By.XPATH,...')confirm_button.click()在弹出框中再点一次确认：send_button = driver.find_element(By.XPATH, '//div[@class="weui-desktop-btn_wrp

3660 0

弹出层之1：JQuery.Boxy (一)

1、下载并修改插件可以在官网上下载到最新版(http://plugins.jquery.com/files/boxy-0.1.4.zip)，到我写这些文字的时候最新版为0.1.4版，下载解压后有1个主要的...js文件：jquery.boxy.js;1个css文件;还有4个图片用于构成弹出层的4个圆角。... div id="m1" style="display: none"> 我是超链接弹出来的div> a标签中的 title如果不设置，弹出的框将没有标题且不能拖动;href后面的锚记...3.3、提交时以确认框形式弹出 $(function() { $(".boxy").boxy();...，该属性为弹出框的显示信息，默认为：“请确认：” 3、每个匹配锚title属性将被用来作为其相应的对话框的标题 4、message的内容的display属性都将设置为block(显示为块) 下载本文示例

2.9K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭