頁面彈窗效果 帶有確認取消按鈕 類似 confrim效果
阿新 • • 發佈:2018-07-11
auto fff document 沒有 color cti -c confirm eat
上代碼 先寫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效果