前端开发之弹出框系列教程二：Confirm确认框

Posted 2020-12-19 caogenrenwu

 1、居中弹出

$k.confirm({
      content:‘居中弹出‘,
      onClosed:function(args){
          if (args.closeTrigger == ‘btn-0‘) {
              $k.alert({content:‘您点了"确定"按钮‘});
          }
          else{
              $k.alert({content:‘您点了"取消"按钮‘});
          }
      }
});

 查看效果

 2、左上角弹出

$k.confirm({
      content:‘左上角弹出‘,
      style:{left:0,top:0},
      onClosed:function(args){
      if (args.closeTrigger == ‘btn-0‘) {
              $k.alert({content:‘您点了"确定"按钮‘});
          }
          else{
              $k.alert({content:‘您点了"取消"按钮‘});
          }
      }
});

 查看效果

 3、右下角弹出

$k.confirm({
      content:‘右下角弹出‘,
      style:{left:‘r‘,top:‘b‘},
      onClosed:function(args){
          if (args.closeTrigger == ‘btn-0‘) {
              $k.alert({content:‘您点了"确定"按钮‘});
          }
          else{
              $k.alert({content:‘您点了"取消"按钮‘});
          }
      }
});

 查看效果

 4、左下角弹出

$k.confirm({
      content:‘左下角弹出‘,
      style:{left:0,top:‘b‘},
      onClosed:function(args){
          if (args.closeTrigger == ‘btn-0‘) {
              $k.alert({content:‘您点了"确定"按钮‘});
          }
          else{
              $k.alert({content:‘您点了"取消"按钮‘});
          }
      }
});

 查看效果

 5、右上角弹出

$k.confirm({
      content:‘右上角弹出‘,
      style:{left:‘r‘,top:0},
      onClosed:function(args){
          if (args.closeTrigger == ‘btn-0‘) {
              $k.alert({content:‘您点了"确定"按钮‘});
          }
          else{
              $k.alert({content:‘您点了"取消"按钮‘});
          }
      }
});

 查看效果

 6、自定义弹出位置

$k.confirm({
      content:‘自定义弹出位置：距左边200px,距上边200px‘,
      style:{left:200,top:200},
      onClosed:function(args){
          if (args.closeTrigger == ‘btn-0‘) {
              $k.alert({content:‘您点了"确定"按钮‘});
          }
          else{
              $k.alert({content:‘您点了"取消"按钮‘});
          }
      }
});

 查看效果