仿iOS彈窗插件Prompt.js

寫了個簡單的彈窗插件Prompt.js, 效果圖以下

功能: 仿iOS彈出效果, 背景模糊, 可傳入的肯定和取消回調函數等.

用法:

不帶參數調用:

Prompt()

會按照默認參數和回調函數調用

帶參數調用:

目前有四個參數 - 標題(str), 內容(str), 肯定回調(function), 取消回調(function). 其中取消回調和標題是可選的, 而內容和肯定回調必填.

javascript
Prompt({content: '<span></span>肯定取消關注達人?', okCallback:function(){void(0)}, cancelCallback:function(){void(0)}})

按參數自動重載

當沒有傳入取消回調函數時, 只會顯示'肯定'按鈕.

代碼

module.exports = window.Prompt = function(options){
    var cancelFlag = false; 
    var titleFlag = false; 
    if(options){
        options.content||(options.content = 'default content'); 
        options.okCallback||(options.okCallback = function(){
            console.log('ok chosen!'); 
        }); 
        if(options.cancelCallback){
            cancelFlag = true; 
        }; 
        if(options.title){
            titleFlag = true; 
        }; 
    }else{
        var options={
            title:'this is default title', 
            content: 'this is default content', 
            okCallback: function(){
                console.log('ok clicked!'); 
            },
            cancelCallback: function(){
                console.log('cancel clicked!'); 
            }
        }
        cancelFlag = true; 
        titleFlag = true; 
    }; 
    // debugger; 
    var shade = document.createElement('div'); 
    shade.setAttribute('style', 'background-color:rgba(0,0,0,0.6); width:100%; height: 100%; position:absolute; left:0; top:0; z-index:1024;')
    shade.classList.add('shade'); 
    var prompt = document.createElement('div'); 
    prompt.setAttribute('style', 'position:absolute; margin:auto; left:0; right:0; top:0; bottom:0; width:6rem; height:4rem; background-color:#fff; z-index:1025; transition: all .3s ease; box-sizing: content-box; padding: 0.2rem; border-radius: 10px; opacity: 0; '); 
    var innerPrompt = document.createElement('div'); 
    innerPrompt.setAttribute('style', 'height:100%; width:100%; text-align: center; font-size: 0.3rem; '); 
    innerPrompt.classList.add('innerPrompt'); 
    
    if(titleFlag){
        var title = document.createElement('p'); 
        title.innerHTML = options.title; 
        innerPrompt.appendChild(title); 
    }; 
    
    var content = document.createElement('p'); 
    content.innerHTML = options.content; 
    innerPrompt.appendChild(content); 
    
    function modualRemoval(){
        document.body.removeChild(shade); 
        var others = document.querySelectorAll('body > *'); 
        [].forEach.call(others, function(elem){
            if(elem.nodeName != 'SCRIPT'){
                elem.style.webkitFilter = ''; 
            }
        }); 
    }; 

    var buttonWrapper = document.createElement('div'); 
    
    var okBtn = document.createElement('button'); 
    okBtn.innerHTML = '肯定'; 
    okBtn.addEventListener('click', function(event){
        options.okCallback(); 
        modualRemoval(); 
        event.stopPropagation(); 
    }); 
    buttonWrapper.appendChild(okBtn); 
    
    if(cancelFlag){
        var cancelBtn = document.createElement('button'); 
        cancelBtn.innerHTML = '取消'; 
        cancelBtn.addEventListener('click', function(event){
            options.cancelCallback();
            modualRemoval(); 
            event.stopPropagation(); 
        }); 
        buttonWrapper.appendChild(cancelBtn); 
    }
    innerPrompt.appendChild(buttonWrapper); 
    
    prompt.appendChild(innerPrompt); 
    shade.appendChild(prompt); 
    document.body.appendChild(shade); 
    setTimeout(function(){
        var others = document.querySelectorAll('body > *:not(.shade)'); 
        [].forEach.call(others, function(elem){
            if(elem.nodeName != 'SCRIPT'){
                elem.style.webkitFilter = 'blur(6px)'; 
            }
        })
        prompt.style.opacity = 1; 
        prompt.style.padding = 0; 
    }, 50); 
    prompt.addEventListener('click', function(event){
        event.stopPropagation(); 
    }); 
    shade.addEventListener('click', function(event){
        modualRemoval(); 
    }); 
}

div.innerPrompt{
    padding: 0.2rem; 
}
div.innerPrompt > p:first-of-type{
    margin-top: 20%; 
}
div.innerPrompt > div{
    position: absolute;
    left:0; 
    bottom: 0; 
    display: -webkit-box; 
    width: 100%; 
    border-bottom-right-radius: 10px; 

}
div.innerPrompt > div > button{
    display: block; 
    -webkit-box-flex: 1; 
    background-color: #fff; 
    border-top: 1px solid #bbb; 
    height: 0.8rem; 
}
div.innerPrompt > div > button:last-child{
    border-bottom-right-radius: 10px; 
    color: #777; 
}
div.innerPrompt > div > button:first-child{
    border-bottom-left-radius: 10px; 
    border-right: 1px solid #bbb; 
    color: red; 
}

你也能夠根據你的喜愛定製CSS

-EOF-