boostrap之弹出框（popover）,控制只有一个只显示框

Posted 2023-04-23

参考技术A //控制插件（popover）只能显示一个显示层。
var popover_view_ctr;
jQuery(document).on('shown.bs.popover',"[data-toggle='popover']",function ()
if(popover_view_ctr != this)
jQuery(popover_view_ctr).popover('hide');
jQuery(popover_view_ctr).show();

popover_view_ctr = this;
);

实例化：

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

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

 查看效果