原生js重写confirm（可自定义）

最新推荐文章于 2024-05-09 11:11:47 发布

阿泽不会飞

最新推荐文章于 2024-05-09 11:11:47 发布

阅读量2.2k

点赞数 4

分类专栏：项目实战周记文章标签： javascript css html

本文链接：https://blog.csdn.net/Azbtt/article/details/130180360

版权

周记同时被 2 个专栏收录

67 篇文章 1 订阅

订阅专栏

项目实战

17 篇文章 0 订阅

订阅专栏

css文件：

文件名：

promptBox.css

*{
    padding: 0;
    margin: 0;
}
#mask{
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    z-index: 10000;
    background-color: rgba(0, 0, 0, 0.5);
}
#mask #confirmBox{
    width: 300px;
    padding: 20px;
    border-radius: 5px;
    background-color: white;
    position: absolute;
    top: 40%;
    left: 50%;
    margin-top: -100px;
    margin-left: -150px;
}
#mask #confirmBox #confirmTitle{
    width: 100%;
    font-size: 24px;
    font-family: 900;
}
#mask #confirmBox #confirmText{
    width: 100%;
    font-size: 16px;
    margin: 5px 0 10px;
}
#mask #confirmBox #confirmButton{
    width: 100%;
    font-size: 14px;
    display: flex;
    justify-content: space-around;
}
#mask #confirmBox #confirmButton button{
    padding: 5px 12px;
}

JS文件：

文件名：

promptBox.js

function reConfirm(obj) {
      let {title,text}=obj
      let Confirmcom = document.createElement('div');
      Confirmcom.innerHTML = `
            <div id="mask">
            <div id="confirmBox">
            <div id="confirmTitle">${title}</div>
            <div id="confirmText">
                  ${text}
            </div>
            <div id="confirmButton">
                  <button>确定</button>
                  <button>取消</button>
            </div>
            </div>
            </div>
      `;
      document.body.appendChild(Confirmcom)
      //渲染组件
      let ConfirmPromise = new Promise((resolve, reject) => {
            let bu = Confirmcom.getElementsByTagName('button')
            bu[0].addEventListener('click', function () {
                  document.body.removeChild(Confirmcom)
                  //移除组件
                  resolve()
            })
            bu[1].addEventListener('click', function () {
                  document.body.removeChild(Confirmcom)
                  //移除组件
                  reject()
            })
      })
      //绑定点击事件
      return ConfirmPromise;
}

使用方法：

function deleteOne(){
    reConfirm({
        title:"确定删除？",//题目
        text:"你是否确定删除该信息"//题目内容
    })
    .then(function(){
        console.log("点了确定");
    })
    .catch(function(){
        console.log("点了取消");
    })
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <link rel="stylesheet" type="text/css" href="promptBox.css"></link>
</head>
<body>
    <button onclick="deleteOne()" style="padding: 10px 20px;">删除</button>
</body>
<script src="promptBox.js"></script>
<script >
  function deleteOne(){
    reConfirm({
        title:"确定删除？",//题目
        text:"你是否确定删除该信息"//题目内容
    })
    .then(function(){
        console.log("点了确定");
    })
    .catch(function(){
        console.log("点了取消");
    })
}

</script>
</html>