自定义javascript弹窗

当前我们可以通过浏览器自带的alert,prompt弹框来提示用户或取得用户输入信息。

此二种方式具有的缺陷：

1. 阻塞：即JS执行至alert, prompt方法时待用户操作后再进行下一个语句的执行。即同步操作

2. 样式单一：针对同一种浏览器，其弹框样式固定，不够美观。

下面我们通过自定义一个弹框库(js)，来解决上面二个问题。

目标：

1. 用户只需使用定义好的js库即可使用弹框。

2. 弹框具有“确定”或“取消”功能，并可回调用户注册的函数（即单击确定或取消后回调的函数）

3. 用户如果想修改样式可自定义css

思路：

1. 弹框以普通html元素来实现, 弹框具有背景(overlay)以遮盖其余部分，防止用户操作弹框以外的页面部分。

2. 框体部分由头部，体部，尾部三大部分。头部展示title, 体部承载提示信息，尾部定义按钮。其中头部与尾部为可选部分

3. 不论用户单击确定还是取消按钮，弹框都要消失。（当用户注册的“确定”按钮回调函数如果返回false，则不关闭弹框）

4. 用户可设置title,body,以及确定按钮的文字，取消按钮的文字。当title为空时，无header部分，确定与取消按钮哪一个定义了文字就显示哪一个按钮。

下面是参考实现代码：

/*** window alert, prompt, and so on* @author DavidWang* @date 2015-11-13 11:14:30* */
;(function($){'use strict';/*** 对话框*/function Dialog(title){if(!(this instanceof Dialog)) return new Dialog(title);this.title = title;this.dones = [];this.fails = [];this.alwayses = [];return this;}Dialog.prototype.title = function(title){this.title = title;return this;};Dialog.prototype.sureBtn = function(txt1){this.btn1 = txt1;return this;};Dialog.prototype.cancelBtn = function(txt2){this.btn2 = txt2;return this;};/*** body有可能是字符串，也有可能是doc element，或者是jQuery包装过的元素* @param body* @returns {Dialog}*/Dialog.prototype.body = function(body){this.body = body;return this;};/**positive button*/Dialog.prototype.done = function(func){this.dones.push(func);return this;};/**negative button*/Dialog.prototype.fail = function(func){this.fails.push(func);return this;};/**always*/Dialog.prototype.always = function(func){this.alwayses.push(func);return this;};/**build the dialog*/Dialog.prototype.build = function(){var overlay = $('<div>').addClass('dialog-overlay');var win = $('<div>').addClass('dialog-window');overlay.append(win);var me = this;//titlethis.title && ((function(){var header = $('<div>').addClass('dialog-header');if(me.title.jquery){header.append(me.title);}else{header.append($('<h3>',{text: me.title}));}win.append(header);})());//bodyvar body = $('<div>').addClass('dialog-body');body.append(this.body.jquery ? this.body : $('<p>',{text: this.body}));win.append(body);//footer(this.btn1 || this.btn2) && (function(){var footer = $('<div>').addClass('dialog-footer');me.btn1 && footer.append($('<a>',{text: me.btn1,href:'javascript:void(0)'}).addClass('dialog-btn').click(function(evt){me.dones.some(function(fn){return fn.call(me) === false;}) || me._always();}))me.btn2 && footer.append($('<a>',{text: me.btn2,href:'javascript:void(0)'}).addClass('dialog-btn').click(function(evt){me.fails.some(function(fn){return fn.call(me) === false;}) || me._always();}))win.append(footer);}());overlay.appendTo(document.body);this.overlay = overlay;this.alwayses.push(function(){overlay.remove();});return this;};Dialog.prototype._always = function(){var me = this;this.alwayses.forEach(function(fn){fn.call(me);});return this;};Dialog.prototype.go = function(){this.overlay.remove();return this;};Dialog.alert = function(msg,cb){return Dialog().body(msg).sureBtn('确定').done(cb || $.noop).build();}window.Dialog = Dialog;})(window.jQuery);

可以看到上面代码中也定义了一个alert方法，是为了单纯弹一个没有header和footer的框，可通过调用go方法移除弹框。

使用方法可参考下述代码：

Dialog().title('My Title').body('Really?').sureBtn('Yes').cancelBtn('No').done(function(){//单击了Yes}).fail(function(){//单击了No}).always(function(){//弹框关闭,即总会回调的方法});

其中的body除了像上面直接写字符串，也可以传入jQuery生成的元素对象，如$('<div>',{text: 'Body'})等

此弹框的样式可参考以下代码

@CHARSET "UTF-8";
/**edit by davidwang 2015-11-13 11:37:30 自定义弹框 使用方法参见dialog.js**/.dialog-overlay{position:fixed;top:0;left:0;right:0;bottom:0;
}.dialog-window{position:absolute;font-family: "Microsoft Yahei",sans-serif;top:100px;left:50%;width:300px;margin-left: -150px;color:#333;border: 1px solid #768995;border-radius: 3px 3px 0 0;
}.dialog-header{background-color:#829aa8;color:#fff;padding:10px;
}
.dialog-header h3{font: 14px bold "Microsoft Yahei",sans-serif;
}.dialog-body{background-color:#fff;padding:15px;font-size:12px;border-bottom: 1px solid #d8dee2;text-align:center;
}.dialog-footer{background-color:#fff;padding:5px;text-align:center;
}.dialog-footer a.dialog-btn{margin: 0 10px 0 10px;cursor:pointer;text-decoration: none;font-weight: bold;
}

自定义javascript弹窗相关推荐

html+css+js自定义弹窗、自定义确认弹窗实现
弹窗的形式很多,有提示用户的.确认操作的或信息展示的等等,应有尽有,很多开源前端框架都有各种各样的弹窗,非常大方精美.但是有的时候我们并不需要集成框架来实现功能,所以自定义的弹窗就可以排上用场了,实现 ...
史上自定义 JavaScript 函数Top 10
史上自定义 JavaScript 函数Top 10 http://www.dustindiaz.com/top-ten-javascript/ 发布:wpulog | 发布时间: 2010年4 ...
vue 定义全局弹框_VUE路由拦截：Vue自定义全局弹窗组件
前言在任何一个平台中,如果需要增加用户黏度,除了用户需要的基本内容外,用户登录注册提交信息也是非常重要的一环,可以了解用户基本信息,用户喜欢等. 抛出前后端混合开发外,vue可以轻松的实现路由拦截. ...
layer,一个可以让你想到即可做到的javascript弹窗（层）解决方案
layer,一个可以让你想到即可做到的javascript弹窗(层)解决方案参考文章: (1)layer,一个可以让你想到即可做到的javascript弹窗(层)解决方案 (2)https://ww ...
android自定义xml弹窗,Android自定义弹窗提醒控件使用详解
Android中原生的Dialog弹窗提醒控件样式单一,有时候并不能满足我们的项目需求,而且一个工程里面有时候会在多处都用到弹窗提醒的功能,代码会出现大量的冗余,工作之余,就自己实现了这么一个弹窗提醒 ...
SweetAlert2网页弹窗---JAVASCRIPT弹窗
一个漂亮的.响应式的.可定制的和可访问(WAI-ARIA)的JAVASCRIPT弹窗,无任何依赖中文文档地址:http://mishengqiang.com/sweetalert2/ 文档地址:ht ...
微信小程序之自定义模态弹窗（带动画）实例
代码地址如下: http://www.demodashi.com/demo/13991.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
android 自定义权限弹窗_Android-开源通用弹窗的封装CommonPopupWindow(总得向别人学点什么)...
终于也是自己封装一些东西了,不管烂不烂,还是自我鼓励了一把!(之前学maven发布也是这个目的) 开源地址: FanChael/CommonPopupWindow 弹窗效果如下: @tip后面会逐渐完 ...
微信小程序之自定义toast弹窗
微信小程序里面的自带弹窗icon只有两种,success和loading.有时候用户输入错误的时候想加入一个提醒图标,也可以使用wx.showToast中的image来添加图片达到使用自定义图标的目的 ...

自定义javascript弹窗

自定义javascript弹窗相关推荐

最新文章

热门文章