<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="css-js/mui.min.css"> </head> <body> <input type="text" name="" class="span" value="233232"> <a href="javascript:;" id="id" >测试</a> </body> </html> <script type="text/javascript"> var lk = (function(document, undefined){ var idSelectorRE = /^#([w-]+)$/; var tagSelectorRE = /^[w-]+$/; var classSelectorRE = /^.([w-]+)$/; var $ = function(selector, context){ context = context || document; if (!selector) return wrap(); if (typeof selector === 'string') { try { selector = selector.trim(); if (idSelectorRE.test(selector)) { var found = document.getElementById(RegExp.$1); return wrap(found ? [found] : []); } return wrap($.qsa(selector, context), selector); } catch (e) {} } } var wrap = function(dom, selector) { dom = dom || []; Object.setPrototypeOf(dom, $.fn); dom.selector = selector || ''; return dom; }; $.fn = { each: function(callback) { [].every.call(this, function(el, idx) { return callback.call(el, idx, el) !== false; }); return this; } }; $.qsa = function(selector, context) { context = context || document; // return $.slice.call(classSelectorRE.test(selector) ? context.getElementsByClassName(RegExp.$1) : tagSelectorRE.test(selector) ? context.getElementsByTagName(selector) : context.querySelectorAll(selector)); //return context.getElementsByClassName(selector); //return context.getElementsByTagName(selector); return context.querySelectorAll(selector); }; $.arrs = function(a){ var arrs = [a[0],a[1]]; return arrs; } return $; })(document); //console.log(lk('.span')); (function($,window,document){ var CLASS_POPUP = 'mui-popup'; var CLASS_POPUP_BACKDROP = 'mui-popup-backdrop'; var CLASS_POPUP_IN = 'mui-popup-in'; var CLASS_POPUP_OUT = 'mui-popup-out'; var CLASS_POPUP_INNER = 'mui-popup-inner'; var CLASS_POPUP_TITLE = 'mui-popup-title'; var CLASS_POPUP_TEXT = 'mui-popup-text'; var CLASS_POPUP_INPUT = 'mui-popup-input'; var CLASS_POPUP_BUTTONS = 'mui-popup-buttons'; var CLASS_POPUP_BUTTON = 'mui-popup-button'; var CLASS_POPUP_BUTTON_BOLD = 'mui-popup-button-bold'; var CLASS_POPUP_BACKDROP = 'mui-popup-backdrop'; var CLASS_ACTIVE = 'mui-active'; var popupStack = []; var backdrop = (function() { var element = document.createElement('div'); element.classList.add(CLASS_POPUP_BACKDROP); element.addEventListener($.EVENT_MOVE, $.preventDefault); element.addEventListener('webkitTransitionEnd', function() { if (!this.classList.contains(CLASS_ACTIVE)) { element.parentNode && element.parentNode.removeChild(element); } }); return element; }()); var createInput = function(placeholder) { return '<div class="' + CLASS_POPUP_INPUT + '"><input type="text" autofocus placeholder="' + (placeholder || '') + '"/></div>'; }; var createInner = function(message, title, extra) { return '<div class="' + CLASS_POPUP_INNER + '"><div class="' + CLASS_POPUP_TITLE + '">' + title + '</div><div class="' + CLASS_POPUP_TEXT + '">' + message.replace(/ /g, "<br/>").replace(/ /g, "<br/>") + '</div>' + (extra || '') + '</div>'; }; var createButtons = function(btnArray) { var length = btnArray.length; var btns = []; for (var i = 0; i < length; i++) { btns.push('<span class="' + CLASS_POPUP_BUTTON + (i === length - 1 ? (' ' + CLASS_POPUP_BUTTON_BOLD) : '') + '">' + btnArray[i] + '</span>'); } return '<div class="' + CLASS_POPUP_BUTTONS + '">' + btns.join('') + '</div>'; }; var createPopup = function(html, callback) { var popupElement = document.createElement('div'); popupElement.className = CLASS_POPUP; popupElement.innerHTML = html; var removePopupElement = function() { popupElement.parentNode && popupElement.parentNode.removeChild(popupElement); popupElement = null; }; popupElement.style.display = 'block'; document.body.appendChild(popupElement); popupElement.offsetHeight; popupElement.classList.add(CLASS_POPUP_IN); if (!backdrop.classList.contains(CLASS_ACTIVE)) { backdrop.style.display = 'block'; document.body.appendChild(backdrop); backdrop.offsetHeight; backdrop.classList.add(CLASS_ACTIVE); } var btns =$.arrs(popupElement.querySelectorAll('.' + CLASS_POPUP_BUTTON)); var input = popupElement.querySelector('.' + CLASS_POPUP_INPUT + ' input'); var popup = { element: popupElement, close: function(index, animate) { if (popupElement) { var result = callback && callback({ index: index || 0, value: input && input.value || '' }); if (result === false) { //返回false则不关闭当前popup return; } if (animate !== false) { popupElement.classList.remove(CLASS_POPUP_IN); popupElement.classList.add(CLASS_POPUP_OUT); } else { removePopupElement(); } popupStack.pop(); //如果还有其他popup，则不remove backdrop if (popupStack.length) { popupStack[popupStack.length - 1]['show'](animate); } else { backdrop.classList.remove(CLASS_ACTIVE); } } } }; var handleEvent = function(e) { popup.close(btns.indexOf(e.target)); }; //$.click('.'+CLASS_POPUP_BUTTON, handleEvent); var btt = document.getElementsByClassName(CLASS_POPUP_BUTTON); for (i=0; i<btt.length; i++) { var re_obj = btt[i].addEventListener('click', handleEvent); } //console.log(document.getElementsByClassName(CLASS_POPUP_BUTTON)); //document.getElementsByClassName(CLASS_POPUP_BUTTON).addEventListener('click',handleEvent); if (popupStack.length) { popupStack[popupStack.length - 1]['hide'](); } popupStack.push({ close: popup.close, show: function(animate) { popupElement.style.display = 'block'; popupElement.offsetHeight; popupElement.classList.add(CLASS_POPUP_IN); }, hide: function() { popupElement.style.display = 'none'; popupElement.classList.remove(CLASS_POPUP_IN); } }); return popup; }; //alert(x.a); var createPrompt = function(message, placeholder, title, btnArray, callback, type) { if (typeof message === 'undefined') { return; } else { if (typeof placeholder === 'function') { callback = placeholder; type = title; placeholder = null; title = null; btnArray = null; } else if (typeof title === 'function') { callback = title; type = btnArray; title = null; btnArray = null; } else if (typeof btnArray === 'function') { type = callback; callback = btnArray; btnArray = null; } } if (type != 'div') { return createPopup(createInner(message, title || '提示', createInput(placeholder)) + createButtons(btnArray || ['取消', '确认']), callback); } }; $.prompt = createPrompt; })(lk,window,document); document.getElementById("id").addEventListener('click', function(e) { var btnArray = ['取消', '确定']; lk.prompt('￥399', '支付密码', '余额支付', btnArray, function(e) { console.log(e); }) }); </script>