当前位置: 首页 > 工具软件 > FytApi.MUI > 使用案例 >

mui 弹框

东门俊智
2023-12-01
<!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(/\r\n/g, "<br/>").replace(/\n/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>

 

转载于:https://www.cnblogs.com/lujiang/p/7770900.html

 类似资料: