原生js重写confirm和select框

原创

已于 2023-09-25 10:20:22 修改 · 1k 阅读

标签

#javascript #css #开发语言

于 2023-09-24 15:54:41 首次发布

本文介绍了一位开发者如何重写原生confirm对话框的样式，以及如何动态添加选项并控制SVG图标显示的JavaScript代码，同时展示了相关的CSS样式设计。

confirm

原生的confirm实在是有点丑之前也写过一个但是感觉样式不够正经所以重写了一个样式如下所示
在这里插入图片描述
js代码

  //封装confirm
let maskmax; let Confirmcnt;
(function () {
   
   
  Confirmcnt = document.createElement("div");
  Confirmcnt.style.display = "none";
  Confirmcnt.classList = "comfirmCenterbox";
  Confirmcnt.innerHTML = `
  <div class="comfirmCenterbox">
  <div class="wordstips">
      <p class="tipsWordcondfirm">提示</p>
      <img src="./popClose.png" alt="" srcset="" class="popclose" οnclick="popClose(this)">
  </div>
  <div class="msgConfirm">
      <p id="mask-main">
        
      </p>
  </div>
  <div class=" ClearFloat bottomConfirm">
      <button class="sureAddConfirm">确认</button>
      <button class="cancleAddConfirm">取消</button>
      </div>
</div>
      `;
  document.body.appendChild(Confirmcnt);
  maskmax = document.getElementsByClassName("comfirmCenterbox")[0];
})();

function confirm(msg) {
   
   
  maskmax.style.display = "block";
  let maskmain = document.getElementById("mask-main");
  maskmain.innerHTML = `${
     
     msg}`;
  let conPromise = new Promise((resolve, reject) => {
   
   
    let button = Confirmcnt.getElementsByTagName("button");
    button[0].addEventListener("click", function () {
   
   
      resolve();
      maskmax.style.display = "none";
    });
    button[1].addEventListener("click", function () {
   
   
      reject();
      maskmax.style.display = "none";
    });
  });
  return conPromise;
}
confirm("是否拒绝?").then(() => {
   
   
 
      })
      function popClose(obj){
   
   
        let elemet=obj.parentNode.parentNode.parentNode;
        elemet.style.display="none";
      }