资讯专栏INFORMATION COLUMN

仿iOS弹窗插件Prompt.js

adie / 2363人阅读

摘要:写了个简单的弹窗插件效果图如下功能仿弹出效果背景模糊可传入的确定和取消回调函数等用法不带参数调用会按照默认参数和回调函数调用带参数调用目前有四个参数标题内容确定回调取消回调其中取消回调和标题是可选的而内容和确定回调必填确定取消关注达人按参

写了个简单的弹窗插件Prompt.js, 效果图如下

功能: 仿iOS弹出效果, 背景模糊, 可传入的确定和取消回调函数等.

用法:
不带参数调用:
Prompt()

会按照默认参数和回调函数调用

带参数调用:

目前有四个参数 - 标题(str), 内容(str), 确定回调(function), 取消回调(function). 其中取消回调和标题是可选的, 而内容和确定回调必填.

javascript
Prompt({content: "确定取消关注达人?", 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-

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/87825.html

相关文章

  • jQuery 图片查看插件 Magnify 开发简介(仿 Windows 照片查看器)

    摘要:随后会陆续发布及相关版本的插件。这和图片查看器的操作方式是相同的。目前的调整大小存在一点,但不影响整体的使用。键盘控制和照片查看器的按键是一样的。除了照片查看器,的图片查看器也非常的高大上。 showImg(https://segmentfault.com/img/remote/1460000012565638?w=750&h=375); 前言 因为一些特殊的业务需求,经过一个多月的蛰...

    anyway 评论0 收藏0
  • jQuery 图片查看插件 Magnify 开发简介(仿 Windows 照片查看器)

    摘要:随后会陆续发布及相关版本的插件。这和图片查看器的操作方式是相同的。目前的调整大小存在一点,但不影响整体的使用。键盘控制和照片查看器的按键是一样的。除了照片查看器,的图片查看器也非常的高大上。 showImg(https://segmentfault.com/img/remote/1460000012565638?w=750&h=375); 前言 因为一些特殊的业务需求,经过一个多月的蛰...

    chaosx110 评论0 收藏0
  • jQuery 图片查看插件 Magnify 开发简介(仿 Windows 照片查看器)

    摘要:随后会陆续发布及相关版本的插件。这和图片查看器的操作方式是相同的。目前的调整大小存在一点,但不影响整体的使用。键盘控制和照片查看器的按键是一样的。除了照片查看器,的图片查看器也非常的高大上。 showImg(https://segmentfault.com/img/remote/1460000012565638?w=750&h=375); 前言 因为一些特殊的业务需求,经过一个多月的蛰...

    Airmusic 评论0 收藏0
  • Vue2.0 仿滴滴出行项目

    摘要:仿滴滴出行项目最近,各大社区出现很多小伙伴的项目,趁着这股热潮我也用撸了一个滴滴出行的项目。可是,后来在手机上发现,输入的时候居然调不出软键盘,写项目的时候没考虑到设备问题,简直是大大的失误。也就是说可以在组件内部进行请求,不需要提交。 Vue2.0 仿滴滴出行项目 最近,各大社区出现很多小伙伴的vue项目,趁着这股热潮我也用vue撸了一个滴滴出行的项目。 效果预览 showImg(h...

    ShevaKuilin 评论0 收藏0
  • VUE2——事件驱动弹窗

    摘要:前几天想了解如何写弹窗组件,参考了知乎上的回答有以下两种可取的写法状态管理如果弹窗组件放在根组件,使用来管理组件的和。 前几天想了解vue如何写弹窗组件,参考了知乎上的回答:https://www.zhihu.com/questio...有以下两种可取的写法:1.状态管理 如果弹窗组件放在根组件,使用vuex来管理组件的show和hide。放在组件内,通过增加v-show或v-if来控...

    voyagelab 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<