js实现一个弹窗div

简介: 网上搜索了半天,奈何没一个满意的,最后还得亲自敲一下,哎~

问题描述

想实现一个这样的功能,点击一个删除按钮后,在当前页面弹出一个对话框,提示确定或取消,如果点击确定,则删除成功,如果点击取消则取消删除。

如下:

2345_image_file_copy_437.jpg

点击后的弹框

2345_image_file_copy_440.jpg

原理

1、就是在当前页面的body上添加一个div

2、然后将此div的position设置为fixed,让它盖在body上

3、然后给这个div一个颜色,调节透明度

4、将自己做好的弹框div居中放进去,并将取消按钮和确定按钮放到这个div中

5、给取消按钮和确定按钮添加点击事件

代码

js

该函数是用来创建上面原理中的所有东西的,业务代码自己根据要求添加。

function alertDiv(){
    //创建div
    let alertBelowDiv = document.createElement("div");//创建最下面的div
    let alertContentDiv = document.createElement("div");//创建呈现内容的白色div
    let alertTextDiv = document.createElement("div");//创建文字div
    let alertSubmitDiv = document.createElement("div");//创建确定div
    let alertCancelDiv = document.createElement("div");//创建取消div
    //获取body
    let body = document.body;
    //添加div
    body.appendChild(alertBelowDiv);
    alertBelowDiv.appendChild(alertContentDiv);
    alertContentDiv.appendChild(alertTextDiv);
    alertContentDiv.appendChild(alertCancelDiv);
    alertContentDiv.appendChild(alertSubmitDiv);
    alertBelowDiv.className="alertBelowDiv";
    alertContentDiv.className="alertContentDiv";
    alertTextDiv.className="alertTextDiv";
    alertCancelDiv.className="alertCancelDiv";
    alertSubmitDiv.className="alertSubmitDiv";
    alertTextDiv.innerHTML="确定当前操作?";
    alertCancelDiv.innerHTML="取消";
    alertSubmitDiv.innerHTML="确定";
    //添加点击函数
    alertCancelDiv.onclick=function (){
        this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
    }
    alertSubmitDiv.onclick=function (){
        //业务代码执行部分
        this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
    }
}

css

*{
    margin: 0;
    padding: 0;
}
html,body{
    height: 100%;
    width: 100%;
}
    /*最底下的灰色div*/
.alertBelowDiv{
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
    background-color: rgba(100, 100, 100, 0.8);
    /*将内容居中*/
    align-items: center;
    display: -webkit-flex;
    justify-content: center;
}
/*白色确定框*/
.alertContentDiv{
    width: 25%;
    height: 30%;
    background-color: white;
    border-radius: 5%;
}
/*展示文字部分*/
.alertTextDiv{
    width: 100%;
    height: 10%;
    margin: 15% auto;
    text-align: center;
    font-size: x-large;
    font-weight: 600;
}
/*取消按钮*/
.alertCancelDiv{
    float: left;
    width: 18%;
    height: 15%;
    background-color: lightslategrey;
    border-radius: 15%;
    font-weight: 600;
    color: #fff;
    align-items: center;
    display: -webkit-flex;
    justify-content: center;
    margin-left: 15%;
}
/*确定按钮*/
.alertSubmitDiv{
    float: right;
    width: 18%;
    height: 15%;
    background-color: lightslategrey;
    border-radius: 15%;
    font-weight: 600;
    color: #fff;
    align-items: center;
    display: -webkit-flex;
    justify-content: center;
    margin-right: 15%;
}


相关文章
|
9月前
|
JavaScript 算法
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
|
4月前
|
机器学习/深度学习 JavaScript 前端开发
JavaScript 弹窗
JavaScript 弹窗
59 1
|
4月前
|
JavaScript 前端开发
js怎么获取div里面的文字长度
js怎么获取div里面的文字长度
79 5
|
4月前
|
JavaScript
js学习--开屏弹窗
js学习--开屏弹窗
58 1
|
5月前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
|
6月前
|
前端开发 JavaScript 开发者
前端JS按钮点击事件、跳出弹窗、遮罩的实战示例
本文提供了一个前端JS按钮点击事件、弹出式窗口和遮罩层的实战示例,包括HTML、CSS和JavaScript的具体实现代码,以及功能解析,演示了如何实现按钮点击后触发弹窗显示和遮罩层,并在2秒后自动关闭或点击遮罩层关闭弹窗的效果。
前端JS按钮点击事件、跳出弹窗、遮罩的实战示例
|
6月前
|
JavaScript 前端开发
js怎么获取div里面的文字长度
js怎么获取div里面的文字长度
71 3
|
6月前
|
存储 JavaScript
js如何实现开屏弹窗
js如何实现开屏弹窗
31 0
|
8月前
|
JavaScript 前端开发
JavaScript弹窗事件
JavaScript弹窗事件
70 0
|
9月前
|
Web App开发 JavaScript 前端开发
javascript操作DIV总结 转
javascript操作DIV总结 转
90 3

热门文章

最新文章

  • 1
    当面试官再问我JS闭包时,我能答出来的都在这里了。
    40
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    27
  • 3
    Node.js 中实现多任务下载的并发控制策略
    32
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 5
    【JavaScript】深入理解 let、var 和 const
    49
  • 6
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    47
  • 7
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    54
  • 8
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    57
  • 9
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    72
  • 10
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    55