jquery ui dialog替代confirm实例分析


Posted in Javascript onJanuary 25, 2016

本文实例讲述了jquery ui dialog替代confirm的方法。分享给大家供大家参考,具体如下:

js的confirm,有的浏览器会直接屏蔽掉,导致功能无法使用,推荐使用jquery ui 的dialog功能,完美替换confirm功能

1、html代码

<div id="confirm_dialog" title="提示" style="display:none;">
</div>

把上面代码放到公用的地方

2、模拟confirm js代码

var common = {
  confirm_act:function(dialog_id,msg,callback) {
    $("#"+dialog_id).html("<p class='message'>"+msg+"</p>");
    $("#"+dialog_id).dialog({
      resizable: false,
      modal: true,
      overlay: {
        backgroundColor: '#000',
        opacity: 0.5
      },
      buttons: {
        '确认': function() {
          callback.call();
          $(this).dialog('close');
        },
        '取消': function() {
          $(this).dialog('close');
        }
      }
     });
  }
}

定义了一个方法confirm_act,放到公用js文件中,第一个参数,弹层的ID,第二个参数是提示消息,第三个,是回调函数。
注意,调用回调函数时,要用js的call()函数,这个回调函数可以带参数,也可以再包含回调函数。

3、回调js代码

var recommend = {
  delete: function(url,obj)
  {
    $.ajax({
      url: url,
      type: "get",
      success:function(data)
      {
        ............省略..........
      }
    });
  }
}

4、怎么调用

$('.recommended_delete').click(function(){
  var obj = this;  //重命名
  common.confirm_act('confirm_dialog',$(obj).attr('msg'),function(){recommend.delete($(obj).attr('url'),obj)});
});

注意,如果函数中要传this,注意要重新定义

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
jquery判断浏览器类型的代码
Nov 05 Javascript
javascript操作excel生成报表全攻略
May 04 Javascript
Jquery $when done then的用法详解
May 20 Javascript
jQuery 3.0十大新特性最终版发布
Jul 14 Javascript
利用Angularjs中模块ui-route管理状态的方法
Dec 27 Javascript
用jQuery实现优酷首页轮播图
Jan 09 Javascript
AngularJS 控制器 controller的详解
Oct 17 Javascript
AngularJS实现自定义指令及指令配置项的方法
Nov 20 Javascript
elementui的默认样式修改方法
Feb 23 Javascript
vue项目tween方法实现返回顶部的示例代码
Mar 02 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
Oct 26 Javascript
javascript中导出与导入实现模块化管理教程
Dec 03 Javascript
AngularJS控制器controller正确的通信的方法
Jan 25 #Javascript
AngularJS入门心得之directive和controller通信过程
Jan 25 #Javascript
详解jquery事件delegate()的使用方法
Jan 25 #Javascript
AngularJS中的Directive实现延迟加载
Jan 25 #Javascript
AngularJS中的Directive自定义一个表格
Jan 25 #Javascript
理解JavaScript事件对象
Jan 25 #Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
Jan 25 #Javascript
You might like
PHP实现分页的一个示例
2006/10/09 PHP
PHP学习之数组值的操作
2011/04/17 PHP
php对关联数组循环遍历的实现方法
2015/03/13 PHP
ThinkPHP路由详解
2015/07/27 PHP
php实现统计二进制中1的个数算法示例
2018/01/23 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
jQuery实现在textarea指定位置插入字符或表情的方法
2015/03/11 Javascript
jquery遍历标签中自定义的属性方法
2016/09/17 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
2016/09/19 Javascript
js自定义Tab选项卡效果
2017/06/05 Javascript
React进阶学习之组件的解耦之道
2017/08/07 Javascript
JavaScript使用Ajax上传文件的示例代码
2017/08/10 Javascript
关于JS与jQuery中的文档加载问题
2017/08/22 jQuery
jQuery 防止相同的事件快速重复触发方法
2018/02/08 jQuery
详解React 服务端渲染方案完美的解决方案
2018/12/14 Javascript
Electron-vue开发的客户端支付收款工具的实现
2019/05/24 Javascript
手把手教您实现react异步加载高阶组件
2020/04/07 Javascript
vue render函数动态加载img的src路径操作
2020/10/26 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
2020/10/29 Javascript
Vue+penlayers实现多边形绘制及展示
2020/12/24 Vue.js
[02:28]DOTA2亚洲邀请赛 LGD战队巡礼
2015/02/03 DOTA
Python使用Mechanize模块编写爬虫的要点解析
2016/03/31 Python
Python错误处理操作示例
2018/07/18 Python
Python字符串匹配之6种方法的使用详解
2019/04/08 Python
Python实现的银行系统模拟程序完整案例
2019/04/12 Python
python GUI库图形界面开发之PyQt5树形结构控件QTreeWidget详细使用方法与实例
2020/03/02 Python
Python模块zipfile原理及使用方法详解
2020/08/04 Python
python根据字典的键来删除元素的方法
2020/08/16 Python
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
2013/01/09 HTML / CSS
世界上最大的各式箱包网络零售店:eBag
2016/07/21 全球购物
美国家居用品和厨具购物网站:DealsDot
2019/10/07 全球购物
材料加工硕士生求职信
2013/10/10 职场文书
工业学校毕业生自荐信范文
2014/01/03 职场文书
教师读书活动总结
2014/05/07 职场文书
2016党员发展对象培训心得体会
2016/01/08 职场文书
自从在 IDEA 中用了热部署神器 JRebel 之后,开发效率提升了 10(真棒)
2021/06/26 Java/Android