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 相关文章推荐
javascript 控制 html元素 显示/隐藏实现代码
Sep 01 Javascript
Firebug 字幕文件JSON地址获取代码
Oct 28 Javascript
Jquery公告滚动+AJAX后台得到数据
Apr 14 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
Dec 05 Javascript
javascript实现鼠标拖动改变层大小的方法
Apr 30 Javascript
7个有用的jQuery代码片段分享
May 19 Javascript
javascript带回调函数的异步脚本载入方法实例分析
Jul 02 Javascript
jQuery 监控键盘一段时间没输入
Apr 22 Javascript
基于Bootstrap下拉框插件bootstrap-select使用方法详解
Aug 07 Javascript
解决angularjs WdatePicker ng-model的问题
Sep 13 Javascript
小程序云函数调用API接口的方法
May 17 Javascript
微信小程序使用前置摄像头拍照
Oct 22 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
PHP4实际应用经验篇(9)
2006/10/09 PHP
php 获取select下拉列表框的值
2010/05/08 PHP
php设计模式 Mediator (中介者模式)
2011/06/26 PHP
PHP分页类集锦
2014/11/18 PHP
WordPress中使主题支持小工具以及添加插件启用函数
2015/12/22 PHP
php while循环控制的简单实例
2016/05/30 PHP
PHP实现批量检测网站是否能够正常打开的方法
2016/08/23 PHP
PHP递归实现文件夹的复制、删除、查看大小操作示例
2017/08/11 PHP
thinkPHP框架RBAC实现原理分析
2019/02/01 PHP
PHP实现统计代码行数小工具
2019/09/19 PHP
动态修改DOM 里面的 id 属性的弊端分析
2008/09/03 Javascript
Jquery 基础学习笔记
2009/05/29 Javascript
jQuery 常见开发使用技巧总结
2009/12/26 Javascript
THREE.JS入门教程(2)着色器-上
2013/01/24 Javascript
jquery如何获取复选框的值
2013/12/12 Javascript
有关JavaScript中call()和apply() 的一些理解
2016/05/20 Javascript
DOM 事件的深入浅出(二)
2016/12/05 Javascript
如何在Angular2中使用jQuery及其插件的方法
2017/02/09 Javascript
JS算法题之查找数字在数组中的索引位置
2019/05/15 Javascript
JavaScript的变量声明与声明提前用法实例分析
2019/11/26 Javascript
你不知道的SpringBoot与Vue部署解决方案
2020/11/09 Javascript
python学习之面向对象【入门初级篇】
2017/01/21 Python
python开发利器之ulipad的使用实践
2017/03/16 Python
PYcharm 激活方法(推荐)
2020/03/23 Python
如何在scrapy中集成selenium爬取网页的方法
2020/11/18 Python
薇诺娜官方网上商城:专注敏感肌肤
2017/05/25 全球购物
美国全球旅游运营商:Pacific Holidays
2018/06/18 全球购物
JDK安装目录下有哪些内容
2014/08/25 面试题
GWebs公司笔试题
2012/05/04 面试题
总经理任命书
2014/03/29 职场文书
学校安全防火方案
2014/06/07 职场文书
作风大整顿心得体会
2014/09/10 职场文书
2014年安全工作总结范文
2014/11/13 职场文书
商超业务员岗位职责
2015/02/13 职场文书
幼儿园教师求职信
2015/03/20 职场文书
动画电影《擅长捉弄人的高木同学》6月10日上映!
2022/03/20 日漫