2018-03-17jQuery手机端弹出框插件popups.js
您现在的位置是: 首页 > WEB前端 > jQuery手机端弹出框插件popups.js
410次阅读
效果图
一、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}
四、示例代码如下