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日期转换 时间戳转日期格式
Nov 05 Javascript
一个Action如何调用两个不同的方法
May 22 Javascript
jQuery 遍历函数详解
Jul 05 Javascript
javascript实现类似百度分享功能的方法
Jul 27 Javascript
用js实现before和after伪类的样式修改的示例代码
Sep 07 Javascript
JS实现图片放大镜插件详解
Nov 06 Javascript
js实现文件上传功能 后台使用MultipartFile
Sep 08 Javascript
clipboard在vue中的使用的方法示例
Oct 19 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
May 12 Javascript
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
微信小程序实现蒙版弹出窗功能
Sep 17 Javascript
Js实现粘贴上传图片的原理及示例
Dec 09 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通过iconv将字符串从GBK转换为UTF8字符集
2011/07/18 PHP
PHP容易忘记的知识点分享
2013/04/30 PHP
详解PHP内置访问资源的超时时间 time_out file_get_contents read_file
2013/06/03 PHP
利用curl 多线程 模拟 并发的详解
2013/06/14 PHP
探讨Smarty中如何获取数组的长度以及smarty调用php函数的详解
2013/06/20 PHP
一组PHP可逆加密解密算法实例代码
2014/01/21 PHP
php开发中的页面跳转方法总结
2015/04/26 PHP
PHP微信企业号开发之回调模式开启与用法示例
2017/11/25 PHP
解决js正则匹配换行问题实现代码
2012/12/10 Javascript
JavaScript中getUTCSeconds()方法的使用详解
2015/06/11 Javascript
JS模仿手机端九宫格登录功能实现代码
2016/04/28 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
浅谈JavaScript的计时器对象
2016/12/26 Javascript
Javascript 对cookie操作详解及实例
2016/12/29 Javascript
Angular ui.bootstrap.pagination分页
2017/01/20 Javascript
JavaScript表单验证的两种实现方法
2017/02/11 Javascript
Angular.js组件之input mask对input输入进行格式化详解
2017/07/10 Javascript
javascript实现QQ空间相册展示源码
2017/12/12 Javascript
JS点击动态添加标签、删除指定标签的代码
2018/04/18 Javascript
Vue实现按钮旋转和移动位置的实例代码
2018/08/09 Javascript
详解jQuery设置内容和属性
2019/04/11 jQuery
ES6中的Javascript解构的实现
2020/10/30 Javascript
JS实现炫酷轮播图
2020/11/15 Javascript
python通过pil模块将raw图片转换成png图片的方法
2015/03/16 Python
Flask框架模板继承实现方法分析
2019/07/31 Python
Django用户认证系统 组与权限解析
2019/08/02 Python
Python run()函数和start()函数的比较和差别介绍
2020/05/03 Python
什么是Python中的顺序表
2020/06/02 Python
python 最简单的实现适配器设计模式的示例
2020/06/30 Python
pycharm2020.2 配置使用的方法详解
2020/09/16 Python
教师师德教育的自我评价
2013/10/31 职场文书
气象学专业个人求职信
2014/03/15 职场文书
2015年食品安全宣传周活动总结
2015/07/09 职场文书
Nginx已编译的nginx-添加新模块
2021/04/01 Servers
详解MySQL集群搭建
2021/05/26 MySQL
vue-cli4.5.x快速搭建项目
2021/05/30 Vue.js