本文实例为大家分享了javascript实现可复用弹窗插件的具体代码,供大家参考,具体内容如下
效果图
下面是详细代码
index.html
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>index</title> <link rel="stylesheet" href="./componet.css" > </head> <body> <button id="button"> 弹窗 </button> <script src="./componet.js"></script> <script> var btn = document.queryselector("#button"); btn.addeventlistener("click", function() { new alertbox({ message: "哈哈哈哈哈哈", success: "确认", cancel: "取消", successcallback: function() { console.log("确认。。。。。。。。。") }, cancelcallback: function() { console.log("取消。。。。。。。。。。。") } }); }) </script> </body> </html>
componet.css
.alert-box{ width: 250px; height: 150px; position: absolute; top: 50%; left: 50%; margin: -75px 0 0 -125px; box-shadow: 0px 0px 10px 7px #ced6e0; border-radius: 5px; background-color: #ffffff; } .alert-box-message{ height:108px; text-align: center; line-height: 108px; font-size: 14px; } .alert-box-buttonwrap{ height: 40px; display: flex; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; overflow: hidden; } .alert-box-button{ height: inherit; text-align: center; line-height: 40px; flex:1; cursor: pointer; font-size: 14px; background-color: white; border-top: solid 1px #ced6e0; transition: background-color 0.5s; } .alert-box-button:hover{ background-color: #dee1e6; color: rgb(88, 88, 88); } .alert-box-button:nth-child(1){ border-right: solid 1px #ced6e0; } .alert-box-show{ -webkit-animation: alert-show 0.3s; -webkit-animation-fill-mode: forwards; animation: alert-show 0.3s; animation-fill-mode: forwards; } .alert-box-hidden{ -webkit-animation: alert-hidden 0.3s; -webkit-animation-fill-mode: forwards; animation: alert-hidden 0.3s; animation-fill-mode: forwards; } @keyframes alert-show{ from{transform: scale(0);} to{transform: scale(1);} } @-webkit-keyframes alert-show{ from{transform: scale(0);} to{transform: scale(1);} } @keyframes alert-hidden{ from{transform: scale(1);} to{transform: scale(0);} } @-webkit-keyframes alert-hidden{ from{transform: scale(1);} to{transform: scale(0);} }
componet.js
function alertbox(options) { this.message = options.message; this.callback = options.callback; this.success = options.success; this.cancel = options.cancel; this.successcallback = options.successcallback; this.cancelcallback = options.cancelcallback; this.createbox(); this.buttonaddevent(); } alertbox.prototype.createbox = function() { let body = document.getelementsbytagname("body")[0]; this.fragment = document.createdocumentfragment(); this.box = cre("div"); this.box.classlist.add("alert-box", "alert-box-show"); let message = cre("div"); message.textcontent = this.message; message.classlist.add("alert-box-message"); this.box.appendchild(message); let buttonwrap = cre("div"); buttonwrap.classlist.add("alert-box-buttonwrap"); this.successbtn = cre("div"); this.successbtn.classlist.add("alert-box-button"); this.successbtn.textcontent = this.success || "确认"; buttonwrap.appendchild(this.successbtn); if (this.cancel) { this.cancelbtn = cre("div"); this.cancelbtn.classlist.add("alert-box-button"); this.cancelbtn.textcontent = this.cancel; buttonwrap.appendchild(this.cancelbtn); } this.box.appendchild(buttonwrap); this.fragment.appendchild(this.box); body.appendchild(this.fragment); } alertbox.prototype.buttonaddevent = function() { this.successbtn.addeventlistener("click", () => { let fn = this.successcallback; fn(); this.box.classlist.add("alert-box-hidden"); settimeout(() => { reme(this.box); }, 310) }); if (this.cancel) { this.cancelbtn.addeventlistener("click", () => { let fn = this.cancelcallback; fn(); this.box.classlist.add("alert-box-hidden"); settimeout(() => { reme(this.box); }, 310) }); } } function cre(element) { return document.createelement(element); } function reme(element) { document.body.removechild(element); }
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。