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