以删除为例,首先新建html

<table border="1" cellpadding="0" cellspacing="0" id="myTab">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>王二狗</td>
<td>24</td>
<td>男</td>
<td><a href="#" class="delete">删除</a></td>
</tr>
<tr>
<td>王小何</td>
<td>26</td>
<td>女</td>
<td><a href="#" class="delete">删除</a></td>
</tr>
</tbody>
</table>

引入<script src="js/jquery.js"></script>

引入<script src="js/mybase.js"></script>,下面是mybase.js的代码:

/*
* @Author: Administrator
* @Date: 2017-01-11 15:12:25
* @Last Modified by: Administrator
* @Last Modified time: 2017-01-11 15:13:33
*/ 'use strict';
var $window = $(window);
var $body = $('body'); function pop(arg){
if(!arg) {
console.error('pop title is required');
} var conf = {}, $box, $mask, $title, $content, $confirm, $cancel, timer, dfd, confirmed; dfd = $.Deferred(); if(typeof arg == 'string')
conf.title = arg;
else{
conf = $.extend(conf,arg);
} $box = $('<div>' +
'<div class="pop_title">'+ conf.title +'</div>' +
'<div class="pop_content">' +
'<div>' +
'<button style="margin-right: 5px;" class="primary confirm">确定</button>' +
'<button class="cancel">取消</button></div>' +
'</div>' +
'</div>')
.css({
color: '#333',
width: 300,
height: 200,
background: '#fff',
position: 'fixed',
'box-radius': 3,
'box-shadow': '0 1px 2px rgba(0,0,0,.3)'
}) $title = $box.find('.pop_title').css({
padding: '5px 10px',
'font-weight': 700,
'font-size': 20,
'text-align': 'center'
}) $content = $box.find('.pop_content').css({
padding: '5px 10px',
'text-align': 'center'
}) $confirm = $content.find('button.confirm');
$cancel = $content.find('button.cancel'); $mask = $('<div></div>')
.css({
position: 'fixed',
background: 'rgba(0,0,0,0.5)',
top: 0,
bottom: 0,
left: 0,
right: 0
}) timer = setInterval(function(){
if (confirmed !== undefined) {
dfd.resolve(confirmed);
clearInterval(timer);
dismiss_pop();
}
},50); $confirm.on('click', on_confirm); // $cancel.on('click', function(){
// confirmed = false;
// }); $cancel.on('click',on_cancel);
$mask.on('click', on_cancel); function on_confirm(){
confirmed = true;
}; function on_cancel(){
confirmed = false;
}; function dismiss_pop(){
$mask.remove();
$box.remove();
} function adjust_box_posititon() {
var window_width = $window.width(),
window_height = $window.height(),
box_width = $box.width(),
box_height = $box.height(),
move_x,
move_y;
move_x = (window_width-box_width)/2;
move_y = ((window_height-box_height)/2)-30; $box.css({
left:move_x,
top:move_y,
});
}
//resize事件作用是,当缩放窗口的时候调用adjust_box_posititon(),使$box一直居中
//但是不能一打开窗口的时候就要求缩放,所以要增加一次触发$window.resize()
$window.on('resize', function() {
adjust_box_posititon();
}); $mask.appendTo($body);
$box.appendTo($body);
//增加一次触发使$box居中
$window.resize();
return dfd.promise();
}

直接调用方法:

<script>
var $task_delete_trigger = $('.delete');
/*查找并监听所有删除按钮的点击事件*/
function listen_task_delete() {
$task_delete_trigger.on('click', function () {
var $this = $(this);
/*找到删除按钮所在的task元素*/
var $item = $this.parent().parent();
/*确认删除?*/
pop('确定删除?')
.then(function (r) {
if (r == true) {
$item.remove()
}
else{
return false
}; })
})
}
listen_task_delete();
</script>

最新文章

  1. AmazeUI定制
  2. Liunx的各种小指令
  3. int类型究竟占几个字节
  4. eclipse导入cordova项目
  5. Hilbert space
  6. 【CodeForces 622A】Infinite Sequence
  7. 0816 1459 json &amp; pickle ,目录导入,目录规范
  8. The specified system/compiler is not supported
  9. Combiner
  10. Linux shell的&amp;&amp;和||--转载
  11. [Immutable,js] Immutable.Record() as data models
  12. C#参数传递、引用类型、值类型等的理解
  13. 关于BOM 的详细介绍
  14. 通过分析HSL/HSB获取图片主色调
  15. .NET Core 2.2 新增部分功能使用尝鲜
  16. 大规模使用 Apache Kafka 的20个最佳实践
  17. Java 多线程 创建线程的4种方式
  18. 洛谷.1919.[模板]A*B Problem升级版(FFT)
  19. Android接入微信SDK之一:发起微信授权登录
  20. 【C++】operator new/new operator/placement new之间的区别

热门文章

  1. vue 表单输入绑定 checkbox
  2. leetcode-161周赛-1247-交换字符使得字符串相同
  3. C之输入输出函数(3) -- 请使用sscanf()
  4. Android中监听ListView滑动到底部
  5. 设置select下拉框高度的一种方法
  6. delphi INI文件
  7. 入门级_Tensorflow网络搭建
  8. Jquery的Ready方法加载为什么两次?
  9. 【android】获取本机ip地址
  10. 前端(二)—— CSS的引入方式、长度与颜色单位、常用样式、选择器