自定义alert 确定取消功能

Posted 2020-08-27 moumou

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