2018-03-17jQuery手机端弹出框插件popups.js

您现在的位置是: 首页 > WEB前端 > jQuery手机端弹出框插件popups.js

410次阅读


效果图


jQuery手机端弹出框插件popups.js


一、HTML代码


<!DOCTYPE html>\r<html>\r<head>\r    <meta http-equiv="Content-type" content="text/html; charset=utf-8">\r    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">\r    <meta name="apple-mobile-web-app-capable" content="yes" />\r    <title>手机端弹出框</title>\r    <link rel="stylesheet" href="css/style.css">\r    <script src="https://www.whmblog.cn/themes/simpleboot3/public/assets/blog/js/jquery-1.10.2.min.js"></script>\r    <script src="js/popups.js"></script>\r    <script>\r        setSize();\r        addEventListener(\'resize\',setSize);\r        function setSize() {\r            document.documentElement.style.fontSize = document.documentElement.clientWidth/750*100+\'px\';\r        }\r    </script>\r    <style>\r        .show-list{\r            width:80%;\r            margin: 0 auto;\r        }\r        .show-list li{\r            height: 1rem;\r            font-size: .3rem;\r            display: flex;\r            flex-direction: row;\r            justify-content: center;\r            align-items: center;\r            border-bottom: 1px solid #dcdcdc;\r        }\r    </style>\r</head>\r<body>\r    <ul>\r        <li id="demo1">toast</li>\r        <li id="demo2">alert</li>\r        <li id="demo3">confirm</li>\r        <li id="demo4">prompt</li>\r        <li id="demo5">点击按钮跳转</li>\r        <li id="demo6">取消默认点击背景消失</li>\r    </ul>\r</body>\r    <script>\r        $(function () {\r            $(\'#demo1\').click(function () {\r                jqtoast(\'你点击了toast\')\r            })\r            $(\'#demo2\').click(function () {\r                jqalert({\r                    title:\'提示\',\r                    content:\'自定义弹窗内容,居左对齐显示,告知需要确认的信息等\'\r                })\r            })\r            $(\'#demo3\').click(function () {\r                jqalert({\r                    title:\'提示\',\r                    content:\'自定义弹窗内容,居左对齐显示,告知需要确认的信息等\',\r                    yestext:\'知道了\',\r                    notext:\'取消\'\r                })\r            })\r            $(\'#demo4\').click(function () {\r                jqalert({\r                    title:\'提示\',\r                    prompt:\'请问你叫什么名字?\',\r                    yestext:\'提交\',\r                    notext:\'取消\',\r                    yesfn:function () {\r                        jqtoast(\'提交成功\');\r                    },\r                    nofn:function () {\r                        jqtoast(\'你点击了取消\');\r                    }\r                })\r            })\r            $(\'#demo5\').click(function () {\r                jqalert({\r                    title:\'提示\',\r                    content:\'自定义弹窗内容,居左对齐显示,告知需要确认的信息等\',\r                    yeslink:\'https://www.baidu.com/\'\r                })\r            })\r            $(\'#demo6\').click(function () {\r                jqalert({\r                    title:\'提示\',\r                    content:\'自定义弹窗内容,居左对齐显示,告知需要确认的信息等\',\r                    click_bg:false\r                })\r            })\r        })\r\r    </script>\r</html>


二、页面样式 —— style.css


*{\r    margin: 0;\r    padding:0;\r    list-style: none;\r    font-size: 16px;\r    color: rgba(0,0,0,.8);\r}\ra{\r    text-decoration: none;\r}\r\r/*jq-alert弹出层封装样式*/\r.jq-alert{\r    position: fixed;\r    top:0;\r    left:0;\r    width:100%;\r    height:100%;\r    display: -webkit-box;\r    display: -webkit-flex;\r    display: -ms-flexbox;\r    display: flex;\r    -webkit-flex-direction: row;\r    flex-direction: row;\r    -webkit-justify-content: center;\r    -webkit-align-items: center;\r    justify-content: center;\r    align-items: center;\r    background-color: rgba(0,0,0,.3);\r    z-index: 99;\r}\r.jq-alert .alert{\r    background-color: #FFF;\r    width:80%;\r    height:auto;\r    border-radius: 4px;\r    overflow: hidden;\r}\r.jq-alert .alert .title{\r    position: relative;\r    margin: 0;\r    font-size: .3rem;\r    height: .8rem;\r    line-height: .8rem;\r    text-align: center;\r    font-weight: normal;\r    color: rgba(0,0,0,.8);\r}\r.jq-alert .alert .content{\r    padding: .3rem;\r    font-size: .28rem;\r    color: rgba(0,0,0,.6);\r}\r.jq-alert .alert .content .prompt{\r    width:100%;\r}\r.jq-alert .alert .content .prompt .prompt-content{\r    font-size: .28rem;\r    color: rgba(0,0,0,.54);\r}\r.jq-alert .alert .content .prompt .prompt-text{\r    background:none;\r    border:none;\r    outline: none;\r    width: 100%;\r    height: .6rem;\r    box-sizing: border-box;\r    margin-top: .2rem;\r    background-color: #FFF;\r    border:1px solid #dcdcdc;\r    text-indent:5px;\r}\r.jq-alert .alert .content .prompt .prompt-text:focus{\r    border: 1px solid #2196F3;\r    background-color: rgba(33,150,243,.08);\r}\r.jq-alert .alert .fd-btn{\r    position: relative;\r    display: -webkit-box;\r    display: -webkit-flex;\r    display: -ms-flexbox;\r    display: flex;\r    -webkit-flex-direction: row;\r    flex-direction: row;\r    -webkit-justify-content: center;\r    -webkit-align-items: center;\r    justify-content: center;\r    align-items: center;\r}\r.jq-alert .alert .fd-btn:after{\r    position: absolute;\r    content: "";\r    top:0;\r    left:0;\r    width:100%;\r    height: 1px;\r    background-color: #F3F3F3;\r}\r.jq-alert .alert .fd-btn a{\r    width:100%;\r    height: .8rem;\r    font-size: .26rem;\r    display: flex;\r    flex-direction: row;\r    align-items: center;\r    justify-content: center;\r    color: rgba(0,0,0,.8);\r}\r.jq-alert .alert .fd-btn a.cancel{\r    position: relative;\r    color: rgba(0,0,0,.5);\r}\r.jq-alert .alert .fd-btn a.cancel:after{\r    content: "";\r    position: absolute;\r    top:.1rem;\r    right:0;\r    width: 1px;\r    height: .6rem;\r    background-color: #F3F3F3;\r}\r.jq-alert .alert .fd-btn a.confirm{\r    color: #2196F3;\r}\r.jq-alert .alert .fd-btn a.confirm:active{\r    background-color: #2196F3;\r    color: #FFF;\r}\r\r/*toast弹出层*/\r.jq-toast{\r    z-index: 999;\r    position:fixed;\r    top:0;\r    left:0;\r    width:100%;\r    height: 100%;\r    display: -webkit-box;\r    display: -webkit-flex;\r    display: -ms-flexbox;\r    display: flex;\r    flex-direction: row;\r    -webkit-flex-direction: row;\r    -ms-flex-direction: row;\r    justify-content: center;\r    -webkit-justify-content: center;\r    align-items: center;\r    -webkit-align-items: center;\r}\r.jq-toast .toast{\r    max-width: 80%;\r    padding: .1rem .2rem;\r    background-color: rgba(0,0,0,.48);\r    color: #FFF;\r    border-radius: 4px;\r    font-size: .28rem;\r}


三、popups.js


/*alert弹出层*/\rfunction jqalert(param) {\r    var title = param.title,\r        content = param.content,\r        yestext = param.yestext,\r        notext = param.notext,\r        yesfn = param.yesfn,\r        nofn = param.nofn,\r        nolink = param.nolink,\r        yeslink = param.yeslink,\r        prompt = param.prompt,\r        click_bg = param.click_bg;\r\r    if (click_bg === undefined){\r        click_bg = true;\r    }\r    if (yestext === undefined){\r        yestext = \'确认\';\r    }\r    if (!nolink){\r        nolink = \'javascript:void(0);\';\r    }\r    if (!yeslink){\r        yeslink = \'javascript:void(0);\';\r    }\r\r    var htm = \'\';\r    htm +=\'<div class="jq-alert" id="jq-alert"><div class="alert">\';\r    if(title) htm+=\'<h2 class="title">\'+title+\'</h2>\';\r    if (prompt){\r        htm += \'<div class="content"><div class="prompt">\';\r        htm += \'<p class="prompt-content">\'+prompt+\'</p>\';\r        htm += \'<input type="text" class="prompt-text"></div>\';\r        htm +=\'</div>\';\r    }else {\r        htm+=\'<div class="content">\'+content+\'</div>\';\r    }\r    if (!notext){\r        htm+=\'<div class="fd-btn"><a href="\'+yeslink+\'" class="confirm" id="yes_btn">\'+yestext+\'</a></div>\'\r        htm+=\'</div>\';\r    }else {\r        htm+=\'<div class="fd-btn">\'+\r            \'<a href="\'+nolink+\'"  data-role="cancel" class="cancel">\'+notext+\'</a>\'+\r            \'<a href="\'+yeslink+\'" class="confirm"  id="yes_btn">\'+yestext+\'</a>\'+\r            \'</div>\';\r        htm+=\'</div>\';\r    }\r    $(\'body\').append(htm);\r    var al = $(\'#jq-alert\');\r    al.on(\'click\',\'[data-role="cancel"]\',function () {\r        al.remove();\r        if (nofn){\r            param.nofn();\r            nofn = \'\';\r        }\r        param = {};\r    });\r    $(document).delegate(\'.alert\',\'click\',function (event) {\r        event.stopPropagation();\r    });\r    $(document).delegate(\'#yes_btn\',\'click\',function () {\r        setTimeout(function () {\r            al.remove();\r        },300);\r        if (yesfn){\r            param.yesfn();\r            yesfn =\'\';\r        }\r        param = {};\r    });\r    if(click_bg === true){\r        $(document).delegate(\'#jq-alert\',\'click\',function () {\r            setTimeout(function () {\r                al.remove();\r            },300);\r            yesfn =\'\';\r            nofn = \'\';\r            param = {};\r        });\r    }\r\r}\r/*toast 弹出提示*/\rfunction jqtoast(text,sec) {\r    var _this = text;\r    var this_sec = sec;\r    var htm = \'\';\r    htm += \'<div class="jq-toast" style="display: none;">\';\r    if (_this){\r        htm +=\'<div class="toast">\'+_this+\'</div></div>\';\r        $(\'body\').append(htm);\r        $(\'.jq-toast\').fadeIn();\r\r    }else {\r        jqalert({\r            title:\'提示\',\r            content:\'提示文字不能为空\',\r            yestext:\'确定\'\r        })\r    }\r    if (!sec){\r        this_sec = 2000;\r    }\r    setTimeout(function () {\r        $(\'.jq-toast\').fadeOut(function () {\r            $(this).remove();\r        });\r        _this = \'\';\r    },this_sec);\r}


四、示例代码如下