JavaScript制作一個簡單的提示框插件

下面是制作的提示框插件文件

window.myPlugin = window.myPlugin || {};window.myPlugin.showMsg = (function () { var mongolia, //蒙層 promptBox, //提示框 closeSpan, //關閉按鈕 titleSpan, //提示標題 contextSpan, //提示信息 okBtn, //確定按鈕 cancelBtn, //取消按鈕 isRegEvent, //是否注冊事件 option; //傳入的參數 /** * 初始化蒙層 */ function initMongolia() { if (!mongolia) { //沒有蒙層則初始化 //蒙層：覆蓋整個窗口，半透明的黑色 mongolia = document.createElement('div'); mongolia.style.position = 'fixed'; mongolia.style.width = mongolia.style.height = '100%'; mongolia.style.left = mongolia.style.top = 0; mongolia.style.background = 'rgba(0,0,0,.5)'; document.body.appendChild(mongolia); } mongolia.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(); mongolia.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 data-myplugin-id='title'></span> <span 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 data-myplugin-id='cancel'></button><button 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 = mongolia.onclick = function () {mongolia.style.display = 'none'; //隱藏蒙層 }; okBtn.onclick = function () {option && option.okFunction && option.okFunction();mongolia.style.display = 'none'; //隱藏蒙層 } cancelBtn.onclick = function () {option && option.cancelFunction && option.cancelFunction();mongolia.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 || {}; } initMongolia(); initPromptBox(); regEvent(); } return showMsg;}());myPlugin.js

引入并使用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='http://www.aoyou183.cn/bcjs/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>index.html

效果展示：

以上就是js制作提示框插件的詳細內容，更多關于js 制作提示框的資料請關注好吧啦網其它相關文章！