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

最新推荐文章于 2024-08-23 10:12:38 发布

gz_gy

最新推荐文章于 2024-08-23 10:12:38 发布

阅读量2.4k

点赞数 1

文章标签： Confirm 确认框弹出框

本文链接：https://blog.csdn.net/gz_gy/article/details/107932614

版权

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:'您点了"取消"按钮'});
          }
      }
});

查看效果