weui 里面的弹出框需要自己写js吗
在项目过程中会遇到需要使用自己定义的弹出框的情况.以前用过ymprompt,但是它太复杂而且不好自己操控.所以自己写了一个弹出框实例. 主要有两类弹出框alert和confirm.基于jQuery alert([title,]des[,callback]): title: 弹出框标题,string类型,; margin-left: 5 } &/style& ...
一款js弹出框,嵌入其它页面: 引用: &script src=&../../js/jquery.reveal.js& type=&text/javascript&&&/script& &link href=&../../style/reveal.css& rel=&sty ...
zDialog插件网址:/jquery-info2426
再次封装zDialog的代码: (function ($) { $.extend({ iDialog: function (param) { var diag = new Dialog(); if (!param.height && !param. ...
在前一篇中,由于不懂jquery,前端做的太差了,今天做稍做修改,增加一个跳转到指定页面功能,表格行点击样式变化.并且在表格中加入bootstarp的按钮组,按钮点击后弹出模态框,须修改common,contorler,view. 在common中添加一个方法重载,以展示按钮组,另外还加了一个隐藏的Id列,需要增加两个参数,一个指定按钮的bootstarp样式,另一个数组指 ...
alert()弹出的内容如何换行:关于alert()警告框大家应该都不陌生,有时候我们需要将弹出的内容进行换行,这样可以使内容更加规整,下面就简单介绍一下如何实现此效果,先看一个错误的操作,代码如下: alert(&1.用户名不能为空&br/&2.密码不能为空&); 以上代码弹出来的内容并不能够进行换行,因为&br/&是html中 ...
前段时间做项目,有个功能是消息提醒. 我相信很多大牛都做过.下面来分享我遇到的问题和解决方案.
首先我们的项目是用frameset框架,main代码. &frameset name=&myFrame& cols=&85,*& frameborder=&no& border=&0& ...
在上节基础上添加对话框显示错误信息. 代码如下: /*弹出对话框显示错误信息,对话框一般不单独出现,一般依赖于窗体.*/ /*练习-列出指定目录内容*/ import java.awt.B import java.awt.D import java.awt.FlowL import java.awt.F import java. ...
效果:/texiao/jqimg/2/效果图:下载:/h/bjaf/jdaqepet.htmHTML代码: ; } body img { width: 300 height: 200 }#hovertreephoto a{color:cadetblue} &/style& ...
1.U盘如下,插入后都是直接在win里面显示的 2.选择连接u盘 3.u盘就可以在虚拟机里面显示了 4.弹出则选择断开连接 扩展:如果无效:请参考这种方法 (给虚拟机分配一个临时硬盘,然后设置这个临时硬盘的路径为U盘或者移动硬盘,具体参考这篇文章:/dunitian/p/4707828.html)
本文是模仿ArcMap里面的Identify(识别)功能,通过点击要素,使其高亮显示并弹出其属性表!本文只做了点击查询! 本文所用的环境为VS2010,AecEngine基于C#语言,界面是用Dev做的,比windows自带的窗体稍微好看点,效果如下: 主要实现代码(在axMapControl1_OnMouseDown下): ; i & axMapControl1.M ...
点击弹出居中带有透明遮罩层窗口:本章节介绍一下如何点击一个按钮实现弹出一个居中窗口,并且此窗口带有半透明的遮罩层效果,此效果在当下比较流行,当然还有更为复杂的实现方式,当然效果也更为绚丽,下面介绍的代码能够简单实现此效果.代码如下: ; overflow: } &/style& &script type=&text/javascript ...
其实想做的就是显示百度地图的弹出层,现在已经简单实现了.示例和代码如下,点击按钮可以看到效果: 1.示例: 2.代码: ;; margin: 0.4em 0 0.4em 10 } .div_show_btn { float: margin: 0.4em 10px 0.4em 0; } #div_hotelmap { height: 360 bord ...
这是一款基于jQuery的弹出对话框插件,这个jQuery对话框插件的最大特点是弹出和关闭都带有非常炫酷的动画特效,比如旋转飞入.上下抖动飞入等.效果图如下: 在线预览
源码下载 实现的代码. html代码: &div class=&container&& &h1&jQuery gDialog Plugin Exampels ...
Response.Write和Response.Redirect一起用的时候就会这样,write脚本和redirect脚本不能同时使用,这样不会执行脚本,最好使用ClientScript 改进方法: 方法一: Page.ClientScript.RegisterClientScriptBlock(this.GetType(), &&, &&lt ...
1 设置延时, 超过该延时未移入弹窗则弹窗隐藏 Tooltip.prototype.init = function{中的 var triggers = this.options.trigger.split(' ')后面加上 //设置延时 if (this.options.trigger.indexOf('hover') & -1) { $.extend(true, t ...
方法一: $('.shade').bind( &touchmove&, function (e) { e.preventDefault(); }); 方法二: $(&body,.main&).height($(window).height()).css({ &overflow-y&: &hidden&qu ...
首先需要datagrid editor对combogrid的扩展,这个是别人实现的: $.extend($.fn.datagrid.defaults.editors, {combogrid: {init: function (container, options) {var input = $('&input type=&text& class=& ...
sharepoint中有一个种wait screen的弹出框,其实就是一直转圈,告诉你等待一会儿时间.用法如下: 弹出: var watiDialog = SP.UI.ModalDialog.showWaitScreenWithNoClose(&Wait for a moment please...&, &It should be very q ...
oaoDailog开发帮助 1.
帮助文档关键字 boostrap模态框oaoDailog 2.
使用场景 当网页上点击某个按钮需要给予用户提示确认,用户点击确认按钮才能继续执行,或者用户点击取消按钮则取消执行操作: 当网页上点击查看,展示的数据需要使用弹出框展示的情况下,可以使用oaoDailog 3.
原理图 基于boos ...从微信WeUI设计规范 解读移动界面设计 - 简书
从微信WeUI设计规范 解读移动界面设计
写在开头，以表明动机、甩掉一切可能需要承担的责任。
目的：看到传播很热的微信WeUI，应该说是一种比较简单暴力的表现形式，但落实到设计者进行学习和实操时，具体数值应该会更有参考性；
过程：部分数据来自css样式，部分数据来自截图后ps测量。
应用：数据中类似色值本身并不具有参考价值，但是动态变化方法值得参考。
其实，规范首页设计上配色清爽、排版简洁、内容上分类清晰，甚得我心（相比于IBM庞大的结构复杂的没汉化的设计规范，真的是业界良心）；每个类别内的交互做得很直观，测试过程真是痛并快乐着；废话就像头皮屑，消灭它用海飞丝！给链接：接下来的内容是对WeUI中列举到的控件的一些理解，除了微信中的实例 也会提及这些控件的通用用法；主要包括Button , Cell , Toast , Dialog , Progress , Msg , Article , Actionsheet , Icons , Panel , Tab , Searchbar.Button一般情况，我们认为移动端的按钮有三态Normal(正常)、Pressed/Highlighted(按下)、Disabled(不可用)。
图01：WeUI-BUTTON整理
表01：WeUI-BUTTON内容整理
* 百分数代表不透明度
* - 表示无变化
* 线框类的button Pressed状态下仅在描边上加响应黑透蒙版
另外，我们知道表单中常用有RadioButton(单选)/CheckBox(复选框)控件，但是这两个控件在iOS控件库中是不存在的，且在移动端我们更多地会把这类需求设计成按钮平铺的形式（面积更大更易识别，如充话费时选择额度按钮 ），这个时候按钮就可能会出现Focused(选中)状态。微信中没有发现相关案例，但在表格中写明。在规范中，配色方案的确定通常都是比较纠结的过程，而为了简化配色方案及为了更有通用性，我们常用的方法就是：调整透明度；具体的做法比如表格中纯色类的按钮边界 是在纯色基础上叠加20%的#000000（不用靠感觉去吸色-调一个深色了），这种方法简单有效、理性；再比如pressed状态，无论是什么背景的色值，通过叠加蒙版的方式都可以得到一个有效的明显的统一的反馈。另外针对灰度等级的设定也可以使用调整透明度的方法，确定多个不同层级的色值；Cell解释为单元格，会不会更易被认知？设计规范的初衷是为了让更多的工作人员迅速认知产品提高开发效率，并且不同的工作人员能在规范约束下做出交互、视觉等方面能保持整体和谐统一的设计；比如：图中标识的 两边留白的统一（即栅格系统）；不同文本内容选取的控件的一致性；Pressed状态 通常在背景上加10%透明蒙版等细节；
图02：Cell列表整理
图03：Cell中的常用控件
* ① 操作列表（ActionSheet）
* ② 数字键盘（Keyboard）
* ③ 选择器（Picker）
* ④ 时间日期选择器（Date Picker）
Toast临时的弹框用来表示一些提示信息，通常在3s±时间消失；
图04：Toast整理
Dialog对话框，在iOS标准UI控件中 也叫警告框（Alert）
图05：Dialog整理
应当尽量遵守：弹框内容须包含标题，有时候会包含正文；包含一个或多个按钮;避免出现不必要的警告框（对话框）。另外弹框的形式一般情况下可以设计成居中弹框或者是底部的弹框，底部的弹框似乎是随着大屏手机的普及应需而生，现在也被越来越广泛得使用；在iOS人机界面指南的控件篇章中，居底弹框是在Actionsheet（操作列表）中的例子，而居中弹框是Alert（警告框）的例子，因此个人觉得，当需要用户进行功能性的操作时用局底弹框，而提示性信息并需要用户确认时可用居中（如上图微信中的案例）；无论如何，保持用户沉浸在我们的APP中进行操作时，应当尽量在这些细节中感觉到统一和谐，有良好的用户体验是我们最终的追求。Progress进度条的示范
图06：Progress整理
Msg信息提示的面板
图07：Msg页面案例
Article文本/文章内容的示例
图08：Article页面案例
通常，阅读类的应用会对内容的排版进行额外的调整，如网易新闻。说一些常用的文字处理方式：①要考虑文字的响应式变化，如在大屏手机和小屏手机中的单行文字显示数量变化引起的布局上的变化；②不同页面导航栏的文字使用相同字号，一般为17pt；③确保文字的可读性，最小字号不小于11pt(dp)；④通常情况下，应用整体使用单一字体（后面附不同OS下文字使用规范）；⑤1.5-1.8倍的行距是比较适宜的文本内容行距；如微信案例中为1.6倍（倍数是指在字号的基础上）；⑥文本总是使用常规(regular)或中等(medium)，一般不使用轻(Light)或者加粗(Bold);
图09：不同OS下的文字使用规范
当你在你的app中使用San Francisco时，iOS会自动在适当的时机在文本模式和展示模式中切换（无需额外标注）；
用photoshop或者sketch生成设计稿时，调整Text/Display，并将渲染模式设为Mac 更接近实现效果；
iOS会根据字号大小，自动调整字间距。
Actionsheet操作列表的规范，在Toast中已提及
图10：Actionsheet页面案例
图标的设计规范
图11：icons页面案例
图标的设计是在UI设计中比较能体现界面风格的细节，icon的设计属于理性和感性比较交错的部分。对于细节要敢于创新也要舍得取舍。体量感的控制，风格的统一，视错觉下的调整……Panel面板的设计规范
图12：panel页面案例
个人觉得WeUI中出现的pannel这部分可能有点多余，这应该和Cell部分一样，属于表单系列；只不过这里的表单是平时我们比较常见的部分（图文组合）；在这种图文组合中，如果能用上亲密性、对比、重复、对齐这几个原则，那一定会是一个标准舒适的界面。TabTab的设计规范
图12：Tab页面案例
我们知道Tab的高度一般取49pt，相对应的tab中icon的大小一般控制在25pt内；SearchBar搜索框的设计规范
图12：searchbar页面案例
文末，感谢开发小伙伴的技术支持
像素级的矫情如何使用Bootstrap的modal组件自定义alert，confirm和modal对话框
本文我将为大家介绍Bootstrap中的弹出窗口组件Modal,此组件简单易用，效果大气漂亮且很实用！
由于浏览器提供的alert和confirm框体验不好，而且浏览器没有提供一个标准的以对话框的形式显示自定义HTML的弹框函数，所以很多项目 都会自定义对话框组件。本篇文章介绍自己在项目中基于bootstrap的modal组件，自定义alert，confirm和modal对话框的经验， 相对比较简单实用，希望能对你有所参考价值。
1. 实例展示
详细的代码可通过前面给出的下载链接下载源码去了解，代码量不大，这三个组件加起来只有200多行
如果你有javascript的组件开发经验，我这个层级的代码相信你一下子就能看明白。源码中我还给出了一个demo，这个demo模拟了一个比较贴近现实需求的一个场景：
1）用户点击界面上的某个按钮，打开之前定义的一个modal框：
2）用户在打开的modal框内填写一些表单，点击确定的时候，会触发一些校验：
没填email时：
填写了email之后：
这两个提示其实是为了演示Alert和Confirm的效果硬塞进去的，实际上可能没有这么别扭的功能。
3）在提示Password为空的时候，细心的人会发现那个确定按钮处于一个禁用的状态，这个考虑是因为确定按钮最终要完成的是一些异步任务，在异步任务成功完成之前，我希望modal组件都不要关闭，并且能够控制已点击的按钮不能重复点击；
4）我用setTimeout模拟了一个异步任务，这个异步任务在点击确定按钮之后，3s才会回调，并且：
当email输入 的时候，会给出提交成功的提示，确定之后就会关闭所有的弹框：
当email输入其它值得时候，会给出提交失败的提示，并且modal框会依然显示在那里：
在组件定义里面，尤其是注册按钮这一块，我加了一些AOP编程的处理，同时利用了jquery的延迟对象，来实现我需要的异步编程，详情请阅读源码，有问题可以在评论区交流赐教。
2. 组件需求
有时候为了写一个好用的组件，只需要把它的大概原型和要对外部提供的接口确定下来，就已经完成这个组件编写最重要的工作了，虽然还没有开始编码。以本文要编写的这几个组件来说，我想要的这几个组件的原型和调用形式分别是这样的：
1）自定义alert框
调用时最多需要两个参数，一个msg用来传递要显示的提示内容，一个onOk用来处理确定按钮点击时候的回调，调用形式有以下2种：
Alert('您选择的订单状态不符合当前操作的条件，请刷新列表显示最新数据后再继续操作！');
msg: '您选择的订单状态不符合当前操作的条件，请刷新列表显示最新数据后再继续操作！',
onOk: function(){
第一种是没有回调的情况，那么直接传递msg即可，第二种是有回调的情况，用options对象的方式来传递msg和onOks回调这两个参数。不管onOk回调有没有，点击按钮的时候都要关闭弹框。
2）自定义confirm框
这个框的原型跟alert框只差一个按钮：
调用形式只有一种：
msg: '您选择的订单状态不符合当前操作的条件，请确认是否要继续操作！',
onOk: function(){
onCancel: function(){
onCancel是在点击取消按钮时候的回调。不管onOk和onCancel回调有没有，点击按钮的时候都要关闭弹框。onCancel回调可以没有。
3）自定义modal框
调用形式：
var modal = new Modal({
title: '',
content: '',
width: 600,
buttons: [
html: '&button type=&button& class=&btn btn-sm btn-primary btn-ok&&确定&/button&',
selector: '.btn-ok',
callback: function(){
//点击确定按钮的回调
html: '&button type=&button& class=&btn btn-sm btn-default btn-cancel&&取消&/button&',
selector: '.btn-cancel',
callback: function(){
//点击取消按钮的回调
onContentReady: function(){
//当modal添加到DOM并且初始化完毕时的事件回调，每个modal实例这个回调只会被触发一次
onContentChange: function(){
//当调用modal.setContent类似的方法改变了modal内容时的事件回调
onModalShow: function(){
//当调用modal.open类似方法显示modal时都会触发的事件回调
onModalHide: function(){
//当调用modal.hide类似方法隐藏modal时都会触发的事件回调
$('#btn-audit').click(function(){
modal.open();
跟Alert和Confirm不同的是，一个页面里面只需要一个Alert和Confirm的实例，但是可能需要多个Modal的实例，所以每个Modal对象都需要单独new一下。由于每个Modal要完成的事情都不相同，所以：
需要一个title参数来设置名称，表达这个Modal正在处理的事情；
content参数表示Modal的html内容；
width参数设置Modal的宽度，Modal的高度保持auto；
buttons参数用来配置这个Modal上面的按钮，一般情况下Modal组件只需要两个按钮（确定和取消）就够了，但也有少数情况需要多个按 钮，所以把按钮做成配置的方式相对灵活一点，每个按钮用三个参数来配置，html表示按钮的html结构，selector方便注册回调的时候通过事件委 托的方式来处理，callback配置按钮点击时的回调；
onContentReady这个事件回调，可以在Modal初始化完毕的时候，主动去初始化Modal内部html的一些组件；由于组件初始化一般只进行一次，所以放在这个回调里面最合适；
onContentChange回调，在一个Modal需要被用作不同的场景，显示不同的HTML的内容时会派上用场，但是不是非常的好用，处理起来逻辑会稍微偏复杂，如果一个Modal实例只做一件事情的时候，onContentChange这个回调就用不到了；
onModalShow这个回调在每次显示Modal的时候都会显示，使用的场景有很多，比如某个Modal用来填写一些表单内容，下次填写的时候需要reset一下表单才能给用户使用，这种处理在这个回调里面处理就比较合适；
onModalHide这个回调有用，不过能够用到的场景不多，算是预留的一个接口。
4）其它需求
所有类型的弹框都做成虚拟模态的形式，显示框的同时加一个遮罩；
所有框都不需要支持拖动和大小调整；
alert和dialog框的标题，按钮数量、按钮位置、按钮文字都固定。
遮罩这个效果，bootstrap的modal组件本身就已经支持了；
拖动和大小调整，这个功能属于锦上添花，但是对软件本身来说，并一定有多少额外的好处，所以我选择不做这种多余的处理；
alert和dialog不需要做太过个性化，能够统一风格，改变浏览器原生的弹框体验即可。
5）DEMO中调用实例
接下来演示下我在完成这三个组件开发之后，实际使用过程中调用这些组件的方式：
var modal = new Modal({
title: '测试modal',
content: $('#modal-tpl').html(),
width: 500,
onOk: function(){
var $form = this.$modal.find('form');
var data = $form.serializeArray();
var postData = {};
data.forEach(function(obj){
postData[obj.name] = obj.
if(!postData.email) {
Alert('请输入EMAIL!');
var deferred = $.Deferred();
if(!postData.password) {
msg: 'Password为空，是否要继续？',
onOk: function(){
onCancel: function(){
deferred.reject();
return $.when(deferred);
function _post(){
//模拟异步任务
setTimeout(function(){
if(postData.email === 'admin@admin') {
msg: '提交成功！',
onOk: function(){
deferred.resolve();
msg: '提交失败！',
onOk: function(){
deferred.reject();
onModalShow: function () {
var $form = this.$modal.find('form');
$form[0].reset();
$('#btn-modal').click(function () {
modal.open();
3. 实现要点
1）最基础的一点，要对bootstrap的modal组件源码有所了解：
初始化方式：$modal.modal()
打开：$modal.modal('show')
关闭：$modal.modal(hide)
事件：bootstrap大部分带过渡效果的组件的事件都是成对的，并且一个是现在时，一个是完成时，modal组件定义了2对：
show.bs.modal和shown.bs.modal，hide.bs.modal和hidden.bs.modal。
这两对事件分别在打开和关闭的过渡效果执行前后触发。从我要定义的组件需求来说，定义组件的时候需要show.bs.modal和hidden.bs.modal这两个事件，在侦听到bootstrap的modal组件派发这两个事件的时候，派发自己定义的组件的事件：
modalShow和modalHide。
backdrop： 是否显示遮罩；
keyboard：是否支持键盘回调；
show：是否在初始化完毕就立即显示。
这三个选项默认都是true，但是在我定义组件的时候，我都配置成了false，键盘回调这种特性暂时不考虑，所以配置为true；当
调用bootstrap的modal初始化的时候当然不能立即显示弹框，所以也不能配置为true；backdrop配置为false的原因在下一点介绍。
2）遮罩处理
如果启用bootstrap的遮罩，会发现在点击遮罩部分的时候，弹框就会自动关掉了，这不是我期望的虚拟模态效果，所以必须把backdrop配 置为false。但是把这个选项配置为false之后，又会引发一个新问题，就是组件没有了遮罩效果，所以为了兼顾这两个问题，只能自己写一个简单的遮罩 处理：
var $body = $(document.body),
BackDrop = (function () {
var $backDrop,
count = 0,
create = function () {
$backDrop = $('&div class=&modal-backdrop fade in&&&/div&').appendTo($body);
show: function () {
!$backDrop && create();
$backDrop[0].style.display = 'block';
count++;
hide: function () {
if (!count) {
$backDrop.remove();
$backDrop =
这段代码中引入count变量的原因是因为BackDrop是一个全局的单例对象，当调用多个modal实例的open方法的时候，都会调用 BackDrop的show方法，为了保证在调用BackDrop的hide方法时，能够确保在所有的modal实例都关闭之后再隐藏Backdrop， 所以就加了一个count变量来记录BackDrop的show方法被调用了多少次，只有当count为0的时候，调用BackDrop的hide方法才 会真正隐藏BackDrop。
3）组件的选项的默认值定义
ModalDialog.defaults = {
title: '',
content: '',
width: 600,
buttons: [
html: '&button type=&button& class=&btn btn-sm btn-primary btn-ok&&确定&/button&',
selector: '.btn-ok',
callback: getDefaultBtnCallbackProxy('onOk')
html: '&button type=&button& class=&btn btn-sm btn-default btn-cancel&&取消&/button&',
selector: '.btn-cancel',
callback: getDefaultBtnCallbackProxy('onCancel')
onOk: $.noop,
onCancel: $.noop,
onContentReady: $.noop,
onContentChange: $.noop,//content替换之后的回调
onModalShow: $.noop,
onModalHide: $.noop//modal关闭之后的回调
通过buttons配置两个默认的按钮，确定和取消，然后为了简化这两个默认按钮的回调配置，把这两个按钮的接口进一步扩展到了上一级别，onOk 和onCancel分别会在点击确定和取消的时候被调用，这两个选项完全是函数回调，不像onContentReady这种属于事件回调。 getDefaultBtnCallbackProxy用来辅助注册onOk和onCancel：
var getDefaultBtnCallbackProxy = function (callbackName) {
return function () {
var opts = this.options,
callback = opts[callbackName] && typeof opts[callbackName] === 'function' ? opts[callbackName] : '';
return callback && callback.apply(this, arguments);
里面的this会被绑定到modal实例上。
4）构造函数：
function ModalDialog(options) {
this.options = this.getOptions(options);
this.$modal =
this.$modalTitle =
this.$modalBody =
this.$modalFooter =
this.state =
这个主要是声明了用到的一些实例变量。
5）关键的原型方法和函数
open: function (state) {
this.state =
!this.$modal && initModal(this, this.options);
BackDrop.show();
this.$modal.modal('show');
这是个原型方法，组件的初始化也是在这个方法调用的时候执行的（延迟初始化）。
initModal = function (that, opts) {
var $modal = createModal(that);
that.setTitle(opts.title);
that.setContent(opts.content);
that.addButtons(opts.buttons);
that.setWidth(opts.width);
bindHandler(that, opts);
$modal.modal();//调用bootstrap的Modal组件
$modal.trigger('contentReady');
这是个函数，用来初始化组件。其中：
setTitle是个原型方法，用来设置modal的标题；
setContent是个原型方法，用来设置modal的html内容；
addButtons是个原型方法，用来注册按钮；
setWidth是个原型方法，用来设置modal的宽度；
bindHandler是个函数，用来注册modal的那些事件；
倒数第二步调用$modal.modal()初始化bootstrap的modal组件；
最后一步触发contentReady事件。
bindHandler源码：
bindHandler = function (that, opts) {
var $modal = that.$
typeof opts.onContentChange === 'function' && $modal.on('contentChange', $.proxy(opts.onContentChange, that));
typeof opts.onContentReady === 'function' && $modal.on('contentReady', $.proxy(opts.onContentReady, that));
typeof opts.onModalShow === 'function' && $modal.on('modalShow', $.proxy(opts.onModalShow, that));
typeof opts.onModalHide === 'function' && $modal.on('modalHide', $.proxy(opts.onModalHide, that));
$modal.on('show.bs.modal', function () {
$modal.trigger('modalShow');
$modal.on('hidden.bs.modal', function () {
$modal.trigger('modalHide');
为了方便使用，我把onContentChange这几个回调的上下文绑定到了当前的modal实例。最后两个事件侦听就是把bootstrap的事件封装成了我定义的modal事件。
addButtons源码：
addButtons: function (buttons) {
var buttons = !$.isArray(buttons) ? [] : buttons,
that = this,
htmlS = [];
buttons.forEach(function (btn) {
htmlS.push(btn.html);
btn.selector && that.$modal.on('click', btn.selector, $.proxy(function (e) {
var self = this,
$btn = $(e.currentTarget);
//先禁用按钮
$btn[0].disabled =
var callback = typeof btn.callback === 'function' ? btn.callback : '',
ret = callback && callback.apply(self, arguments);
if (ret === false) {
$btn[0].disabled =
if (typeof(ret) === 'object' && 'done' in ret && typeof ret['done'] === 'function') {
//异步任务只有在成功回调的时候关闭Modal
ret.done(function () {
that.hide();
}).always(function () {
$btn[0].disabled =
$btn[0].disabled =
that.hide();
}, that));
this.$modalFooter.prepend($(htmlS.join('')));
从这个代码可以看出：
当按钮点击之后，按钮就会被禁用；
当按钮返回false的时候，按钮恢复，但是modal不会被关闭，说明当前的一些操作被代码给拦下来了；
当按钮返回的是一个延迟对象的时候，会等到延迟对象完成的时候才会恢复按钮，并且只有在延迟对象resolve的时候才会关闭modal；
否则就恢复按钮，并主动关闭modal。
在这段代码里面考虑了：
按钮的防重复点击，modal的自动关闭以及异步任务的处理。
6）封装Alert和Confirm
Alert和Confirm其实就是一个特殊的modal，另外这两个组件还可以共用一个modal，了解到这些基础之后，组件就可以这样定义：
var Alert, C
(function () {
var modal,
Proxy = function (isAlert) {
return function () {
if (arguments.length != 1)
var msg = typeof arguments[0] === 'string' && arguments[0] || arguments[0].msg || '',
onOk = typeof arguments[0] === 'object' && typeof arguments[0].onOk === 'function' && arguments[0].onOk,
onCancel = typeof arguments[0] === 'object' && typeof arguments[0].onCancel === 'function' && arguments[0].onCancel,
width = typeof arguments[0] === 'object' && arguments[0].width || 400,
_onModalShow = function () {
this.setWidth(width);
this.setContent(msg);
this[(isAlert ? 'hide' : 'show') + 'Button']('.btn-cancel');
_onModalHide = function () {
this.setContent('');
//延迟初始化modal
if(!modal) {
modal = new Modal({
'title': '操作提示',
onModalShow: _onModalShow,
onModalHide: _onModalHide,
onContentReady: function(){
this.$modalBody.css({
'padding-top': '30px',
'padding-bottom': '30px'
//如果modal已经初始化则需要重新监听事件
var $modal = modal.$
$modal.off('modalShow modalHide');
$modal.off('modalShow modalHide');
$modal.on('modalShow', $.proxy(_onModalShow, modal));
$modal.on('modalHide', $.proxy(_onModalHide, modal));
modal.setOptions({
onOk: onOk || $.noop,
onCancel: onCancel || $.noop
modal.open();
Alert = Proxy(true);
Confirm = Proxy();
这段代码里：
首先考虑到了延迟初始化这个全局的modal组件；
由于onModalHide和onModalShow这两个回调属于事件回调，在初始化组件的时候通过options传进去的参数，不能通过修改options的方式来更改回调，只能通过重新注册的方式来处理；而onOk和onCancel属于函数回调，只要更改了options里面的引用，回调 就能更改；
考虑到Alert和Confirm内容的长短，新加了一个参数width，以便调节框的宽度。
本文介绍的是自己在定义js组件过程中的一些方法和实践，代码偏多，不容易引起人的阅读兴趣，但是文中介绍的方法比较简单，而且这三个组件我已经用到好几个项目里面，从目前来看，能够解决我所有需要的弹框需求，所以我把它推荐出来，希望能给有需要的人带来帮助。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：34134次
积分：1125
积分：1125
排名：千里之外
原创：27篇
转载：319篇
(9)(44)(98)(141)(55)