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操作radio的简单实例
Jan 06 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
Dec 04 Javascript
JS奇技之利用scroll来监听resize详解
Jun 15 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
Jul 07 Javascript
Javascript 一些需要注意的细节(必看篇)
Jul 08 Javascript
js图片上传的封装代码
Aug 01 Javascript
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
微信小程序实现留言板功能
Nov 02 Javascript
微信小程序新手教程之页面打开数量限制
Mar 03 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
Sep 09 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
Jun 05 Javascript
解析原生JS getComputedStyle
May 25 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 中的str_replace 函数总结
2007/04/27 PHP
php自定义函数实现JS的escape的方法示例
2016/07/07 PHP
jquery属性选择器not has怎么写 行悬停高亮显示
2013/11/13 Javascript
javascript省市区三级联动下拉框菜单实例演示
2015/11/29 Javascript
ECharts仪表盘实例代码(附源码下载)
2016/02/18 Javascript
Bootstrap模态对话框的简单使用
2016/04/29 Javascript
实现JavaScript的组成----BOM和DOM详解
2016/05/18 Javascript
Angular2学习笔记——详解路由器模型(Router)
2016/12/02 Javascript
js 轮播效果实例分享
2016/12/28 Javascript
jquery 禁止鼠标右键并监听右键事件
2017/04/27 jQuery
vue中的ref和$refs的使用
2018/11/22 Javascript
JS执行控制之节流模式实例分析
2018/12/21 Javascript
vue内置组件keep-alive事件动态缓存实例
2020/10/30 Javascript
[02:03]风行者至宝清风环佩外观展示
2020/09/05 DOTA
python 将字符串转换成字典dict
2013/03/24 Python
Python中的列表生成式与生成器学习教程
2016/03/13 Python
Python模块文件结构代码详解
2018/02/03 Python
python调用matlab的m自定义函数方法
2019/02/18 Python
详解用python自制微信机器人,定时发送天气预报
2019/03/25 Python
Python3并发写文件与Python对比
2019/11/20 Python
python 协程 gevent原理与用法分析
2019/11/22 Python
python由已知数组快速生成新数组的方法
2020/04/08 Python
Python用类实现扑克牌发牌的示例代码
2020/06/01 Python
Python实现进度条和时间预估的示例代码
2020/06/02 Python
Python绘制动态水球图过程详解
2020/06/03 Python
Selenium Webdriver元素定位的八种常用方式(小结)
2021/01/13 Python
css3中background新增的4个新的相关属性用法介绍
2013/09/26 HTML / CSS
加拿大女包品牌:Matt & Nat
2017/05/12 全球购物
物资采购方案
2014/06/12 职场文书
珠宝的促销活动方案
2014/08/31 职场文书
信访稳定工作汇报
2014/10/27 职场文书
师范生见习报告
2014/10/31 职场文书
2014年学生会工作总结
2014/11/07 职场文书
2015年置业顾问工作总结
2015/04/07 职场文书
工作简报怎么写
2015/07/21 职场文书
SqlServer: 如何更改表的文件组?(进而改变存储位置)
2021/04/05 SQL Server