夏日博客

A-A+

jquery ui dialog 替代 confirm的例子

2016年01月13日 前端设计 暂无评论 阅读 8 views 次

jquery ui dialog是一个弹出层一样的确认提示框了而confirm是js原生太的确认提示框了,confirm有一个缺点就是点击时会有声音了,所以体验非常的不错了,下面我们来看一个jquery ui dialog 替代 confirm的例子
js的confirm,有的浏览器会直接屏蔽掉,导致功能无法使用,推荐使用jquery ui 的dialog功能,完美替换confirm功能.

1,html代码

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

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

2,模拟confirm js代码

  1. var common = {    
  2.     confirm_act:function(dialog_id,msg,callback) {    
  3.         $("#"+dialog_id).html("<p class='message'>"+msg+"</p>");    
  4.         $("#"+dialog_id).dialog({    
  5.             resizable: false,    
  6.             modal: true,    
  7.             overlay: {    
  8.                 backgroundColor: '#000',    
  9.                 opacity: 0.5    
  10.             },    
  11.             buttons: {    
  12.                 '确认': function() {    
  13.                     callback.call();    
  14.                     $(this).dialog('close');    
  15.                 },    
  16.                 '取消': function() {    
  17.                     $(this).dialog('close');    
  18.                 }    
  19.             }    
  20.          });    
  21.     }    
  22. }  

定义了一个方法confirm_act，放到公用js文件中，第一个参数，弹层的ID，第二个参数是提示消息，第三个，是回调函数。

注意，调用回调函数时，要用js的call()函数，这个回调函数可以带参数，也可以再包含回调函数。

3，回调js代码

  1. var recommend = {    
  2.     delete: function(url,obj)    
  3.     {    
  4.         $.ajax({    
  5.             url: url,    
  6.             type: "get",    
  7.             success:function(data)    
  8.             {    
  9.                 ............省略..........    
  10.             }    
  11.         });    
  12.     }    
  13. }  

4，怎么调用

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

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

标签：

给我留言