当前位置:主页 > JavsScript库 > 通知 / 提示 >

元素周围创建弹出框提示 - Popover.js
栏目分类:通知 / 提示   发布日期:2021-08-15   浏览次数:

一个小巧但完全可配置的弹出框 JavaScript 库,用于围绕您指定的任何 DOM 元素创建工具提示和弹出框样式的弹出框。

特征:

  • 由单击或悬停事件触发。

  • 智能定位。

  • 平滑过渡。

  • 是否带有箭头图标。

使用

1. 将必要的 JavaScript 和 CSS 文件导入到文档中。

<link rel=”stylesheet” href=”dist/popover.min.css” />
<script src=”dist/popover.min.js”></script>

2. 将内容插入弹出窗口。

<div id="popover-target">
  <div class="pop-comp-content">弹出框内容</div>
</div>

3. 将弹出框附加到元素上。

<button class="popover-demo" data-popover-target="#popover-target">
        点击我
</button>

PopoverComponent.init({
  ele: '.popover-demo'
});

4. 默认情况下,弹窗是由点击触发的。如果您想像工具提示一样在悬停时显示弹出框,您可以将 showOnHover 选项设置为 true。

PopoverComponent.init({
  ele: '.popover-demo',
  showOnHover: true
});

5. 配置弹出库的所有可能选项。

  • ele:触发元素切换弹出元素

  • target:获取弹出元素的 CSS 选择器

  • position=auto: popover 元素的位置(自动,顶部,底部,左,右,左上,右上,左下,右下,左上,左下,右上,右下)

  • margin=8: popover 元素和它的 Trigger 元素之间的空间(以像素为单位)

  • offset=5: popover元素和窗口边缘之间的空间

  • enterDelay=0:显示popover元素之前的延迟时间(以毫秒为单位)

  • exitDelay=0:隐藏popover元素之前的延迟时间(以毫秒为单位)

  • showDuration=300:显示动画的过渡持续时间(以毫秒为单位)

  • hideDuration=200:隐藏动画的过渡持续时间(以毫秒为单位)

  • transitionDistance=10:显示/隐藏动画的平移距离(以像素为单位)

  • zIndex=1: popover 元素的 CSS z-index 值

  • hideOnOuterClick=true:点击弹出框元素外隐藏

  • showOnHover=false:在悬停触发元素上显示弹出元素

  • hideArrowIcon=false:在弹出窗口中隐藏箭头图标

  • disableUpdatePosition=false:在父元素上滚动时禁用更新弹出位置

  • disableManualAction=false:禁用在单击/悬停时显示弹出


6. 您还可以通过 HTMLdata-*属性传递选项,如下所示:

<div class="popover-demo" data-popover-position="bottom"></div>

7. 弹窗显示和隐藏后的触发功能。

PopoverComponent.init({
  ele: '.popover-demo',
  beforeShow: function(){
    // 做此事情
  },
  beforeHide: function(){
    // 做此事情
  }
  afterShow: function(){
    // 做此事情
  },
  afterHide: function(){
    // 做此事情
  }
});


官方网站:https://github.com/sa-si-dev/popover

相关热词: Popover.js弹出框提示

相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库