Bootstrap 弹出框

  • 定义和使用

    弹出框组件类似于工具提示;它是当用户单击元素时出现的弹出框;区别在于弹出窗口可以包含更多内容。
    要创建弹出框提示,请将 data-toggle="popover" 属性添加到元素。
    使用 title 指定弹出框的标题文本;并使用 data-content 属性指定应在弹出框的正文中显示的文本:
    <a href="#" data-toggle="popover" title="弹出框标题" data-content="弹出框的一些内容">切换弹出框</a>
    
    注意:弹出框工具提示必须使用jQuery初始化:选择指定的元素并调用 popover() 方法。
    以下代码将启用文档中的所有弹出窗口:
    <div class="container">
      <a href="#" data-toggle="popover" title="弹出框标题" data-content="弹出框的一些内容">切换弹出框</a>
    </div>
    <script>
    $(document).ready(function(){
      $('[data-toggle="popover"]').popover();
    });
    </script>
    
    尝试一下
    输出结果如下:
  • 定位弹出框

    默认情况下,弹出框将显示在元素的右侧。
    使用 data-placement 属性设置工具提示在元素的顶部,底部,左侧或右侧的位置:
    <div class="container">
      <a href="#" data-toggle="popover" title="弹出框标题" data-content="弹出框的一些内容" data-placement="top">顶部</a>
      <a href="#" data-toggle="popover" title="弹出框标题" data-content="弹出框的一些内容" data-placement="bottom">底部</a>
      <a href="#" data-toggle="popover" title="弹出框标题" data-content="弹出框的一些内容" data-placement="left">左侧</a>
      <a href="#" data-toggle="popover" title="弹出框标题" data-content="弹出框的一些内容" data-placement="right">右侧</a>
    </div>
    <script>
    $(document).ready(function(){
      $('[data-toggle="popover"]').popover();  
    });
    </script>
    
    尝试一下
    输出结果如下:
    注意:如果放置属性没有足够的空间,它们将无法按预期工作。 例如:如果您使用页面顶部的顶部位置(没有空间放置),它将在元素下方或右侧(位置允许放置空间)显示弹出框。
  • 关闭弹出框

    默认情况下,当再次单击该元素时,弹出框是关闭的;但是,您可以使用 data-trigger="focus" 属性,该属性将在元素外部单击时关闭弹出窗口:
    <div class="container">
      <a href="#" data-trigger="focus" data-toggle="popover" title="弹出框标题" data-content="弹出框的一些内容" data-placement="top">点击我</a>
    </div>
    <script>
    $(document).ready(function(){
      $('[data-toggle="popover"]').popover();  
    });
    </script>
    
    尝试一下
    输出结果如下:
    提示:如果希望在将鼠标指针移到元素上时显示弹出框,请使用 data-trigger 属性,其值为 "hover"
    <div class="container">
      <a href="#" data-trigger="hover" data-toggle="popover" title="弹出框标题" data-content="弹出框的一些内容" data-placement="top">鼠标经过我</a>
    </div>
    <script>
    $(document).ready(function(){
      $('[data-toggle="popover"]').popover();  
    });
    </script>
    
    尝试一下
    输出结果如下: