22.JavaScript制作一个简单的提示框插件
程序员文章站
2022-04-13 09:09:44
JavaScript制作一个简单的提示框插件 下面是制作的提示框插件文件 window.myPlugin = window.myPlugin || {}; window.myPlugin.showMsg = (function () { var *, //蒙层 promptBox, / ......
javascript制作一个简单的提示框插件
下面是制作的提示框插件文件
window.myplugin = window.myplugin || {}; window.myplugin.showmsg = (function () { var *, //蒙层 promptbox, //提示框 closespan, //关闭按钮 titlespan, //提示标题 contextspan, //提示信息 okbtn, //确定按钮 cancelbtn, //取消按钮 isregevent, //是否注册事件 option; //传入的参数 /** * 初始化蒙层 */ function init*() { if (!*) { //没有蒙层则初始化 //蒙层:覆盖整个窗口,半透明的黑色 * = document.createelement("div"); *.style.position = "fixed"; *.style.width = *.style.height = "100%"; *.style.left = *.style.top = 0; *.style.background = "rgba(0,0,0,.5)"; document.body.appendchild(*); } *.style.display = "block"; //展示蒙层 } /** * 初始化提示框 */ function initpromptbox() { //提示框:宽高300,位置居中 if (!promptbox) { promptbox = document.createelement("div"); promptbox.style.width = promptbox.style.height = "300px"; promptbox.style.background = "#fff"; promptbox.style.fontsize = "14px"; promptbox.style.position = "absolute"; promptbox.style.top = promptbox.style.left = "50%"; promptbox.style.marginleft = promptbox.style.margintop = "-150px"; promptbox.style["data-myplugin-id"] = "promptbox"; initpromptcontext(); *.appendchild(promptbox); titlespan = document.queryselector("[data-myplugin-id='title']"); //提示标题 contextspan = document.queryselector("[data-myplugin-id='message']"); //提示信息 closespan = document.queryselector("[data-myplugin-id='close']"); //关闭按钮 okbtn = document.queryselector("[data-myplugin-id='ok']"); //确定按钮 cancelbtn = document.queryselector("[data-myplugin-id='cancel']"); //取消按钮 } okbtn.innertext = option.oktext || "确定"; cancelbtn.innertext = option.canceltext || "取消"; titlespan.innertext = option.title || "提示"; contextspan.innertext = option.context || ""; } /** * 初始化提示框中的内容 */ function initpromptcontext() { //内容包含:标题,关闭按钮,提示信息,确定按钮,取消按钮 //创建标题,关闭按钮 var div = document.createelement("div"); div.innerhtml = `<span style="float:left;" data-myplugin-id="title"></span> <span style="float:right;cursor:pointer;" data-myplugin-id="close">x</span>`; div.style.height = "50px"; div.style.padding = "10px 20px"; div.style.background = "#eee"; div.style.boxsizing = "border-box"; promptbox.appendchild(div); //创建提示信息 div = document.createelement("div"); div.innerhtml = `<span data-myplugin-id="message"></span>`; div.style.height = "200px"; div.style.padding = "10px 20px"; div.style.boxsizing = "border-box"; promptbox.appendchild(div); //创建确定按钮,取消按钮 div = document.createelement("div"); div.innerhtml = `<button style="float:right;margin:10px;cursor:pointer;" data-myplugin-id="cancel"></button><button style="float:right;margin:10px;cursor:pointer;" data-myplugin-id="ok"></button>`; div.style.height = "50px"; div.style.padding = "10px 20px"; div.style.boxsizing = "border-box"; promptbox.appendchild(div); } //注册事件 function regevent() { if (!isregevent) { //未注册事件 //1.点击关闭,点击蒙层,点击取消按钮 closespan.onclick = *.onclick = function () { *.style.display = "none"; //隐藏蒙层 }; okbtn.onclick = function () { option && option.okfunction && option.okfunction(); *.style.display = "none"; //隐藏蒙层 } cancelbtn.onclick = function () { option && option.cancelfunction && option.cancelfunction(); *.style.display = "none"; //隐藏蒙层 } //2.拖动提示框事件 window.onmousedown = function (e) { var target = gettarget(e.target); //是否包含目标元素 if (target) { var style = window.getcomputedstyle(target); var left = parseint(style.left); var top = parseint(style.top); var disx = parseint(e.pagex) - left; var disy = parseint(e.pagey) - top; window.onmousemove = function (e) { var newleft = parseint(e.pagex) - disx; var newtop = parseint(e.pagey) - disy; promptbox.style.left = newleft + "px"; promptbox.style.top = newtop + "px"; }; window.onmouseup = window.onmouseleave = function () { window.onmousemove = null; } } }; function gettarget(target) { while (target) { if (target.tagname === "div" && target.style["data-myplugin-id"] === "promptbox") { return target; } else { target = target.parentelement; } } return false; } } } /** * @param {object} opts * opts.title : 提示标题 * opts.context : 提示信息 * opts.canceltext:取消按钮内容 * opts.oktext:确定按钮内容 * opts.canceltext:取消按钮内容 * opts.okfunction:确定按钮的回调函数 * opts.cancelfunction:取消按钮的回调函数 */ function showmsg(opts) { if (typeof opts === "string") { option = { context: opts } } else { option = opts || {}; } init*(); initpromptbox(); regevent(); } return showmsg; }());
引入并使用myplugin.js文件
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>document</title> </head> <body> <script src="./js/myplugin.js"></script> <script> window.myplugin.showmsg({ title: "信息", context: "确定删除吗", oktext: "ok", canceltext: "cancel", okfunction: function(){ console.log("点击ok按钮"); }, cancelfunction:function(){ console.log("点击cancel按钮"); } }); </script> </body> </html>
效果展示:
下一篇: 只是简简单单的不想秃顶