以删除为例,首先新建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>