上代碼 先寫js 建立各個元素到頁面上 這裏面對應的三個參數是 內容和兩個按鈕內的內容 newconfrim ("彈窗內容","取消","完成")

   /*建立新彈窗*/
function newconfrim (text,console,sure) {
     var myconfirm = document.createElement("div");
     myconfirm.className = "myconfirm"
     document.getElementsByTagName("body")[0].appendChild(myconfirm);
     $(
 
".myconfirm").html("<div class=‘myconfirmin‘><h4></h4><div class=‘myout‘><div class=‘myoutin myconsole‘></div><div class=‘myoutin mysure‘></div></div></div>")
     /*設定內容 沒有內容默認為是否確定  和設定按鈕內容*/
      text?$(".myconfirm h4").text(text):$(".myconfirm h4
 
").text("您確定要提交嗎？")
      console?$(".myconfirm .myconsole").text(console):$(".myconfirm .myconsole").text("取消")
       sure?$(".myconfirm .mysure").text(sure):$(".myconfirm .mysure").text("確定")
       /*點取消*/
       $(".myconsole").on("click",function(){
           $(".myconfirm").remove()
               alert(
 
"已刪除彈窗")
       })
       /*點確認do sometings*/
       $(".mysure").on("click",function(){
               alert("do sometings")
           $(".myconfirm").remove()
       })
     
}

    newconfrim ("彈窗內容","取消","完成")
    /*建立新彈窗end*/

下面css代碼 我寫的是less 用的rem 可以改成px的

//彈窗
.myconfirm {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.4);
    .myconfirmin {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 65%;
        height: 30%;
        text-align: center;
        overflow: hidden;
        h4{
            font-size: 0.3rem;
            padding: 0.3rem 0.2rem 0.5rem;
        background-color: #fff;
        border-radius: 0.1rem 0.1rem 0 0;
        }
        .myout {
            width: 100%;
            background-color: #212121;
            height: 0.8rem;
            line-height: 0.8rem;
            color: #fff;
        border-radius:0 0 0.1rem 0.1rem ;
        }
        .myoutin {
            width: 50%;
            float: left;
            font-size: 0.3rem;
        }
        .myconsole {
            border-right: 0.01rem solid  #fff;
        }

    }
}

下面是解析好的css less和css選一個就好了

.myconfirm {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}
.myconfirm .myconfirmin {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 65%;
  height: 30%;
  text-align: center;
  overflow: hidden;
}
.myconfirm .myconfirmin h4 {
  font-size: 0.3rem;
  padding: 0.3rem 0.2rem 0.5rem;
  background-color: #fff;
  border-radius: 0.1rem 0.1rem 0 0;
}
.myconfirm .myconfirmin .myout {
  width: 100%;
  background-color: #212121;
  height: 0.8rem;
  line-height: 0.8rem;
  color: #fff;
  border-radius: 0 0 0.1rem 0.1rem ;
}
.myconfirm .myconfirmin .myoutin {
  width: 50%;
  float: left;
  font-size: 0.3rem;
}
.myconfirm .myconfirmin .myconsole {
  border-right: 0.01rem solid  #fff;
}

然後頁面就可以出來了

看完給個贊哦       技術交流可加微信好友 -- LOSTU5

頁面彈窗效果 帶有確認取消按鈕 類似 confrim效果