Bootstrap 弹出框

2018-03-18 14:38 更新

弹出框(Popovers)就像工具提示(tooltips),但更大,更流行。你可以在弹出框中放置比工具提示更多的内容。当你有更多的HTML内容或文本内容显示时,建议使用弹出框而不是工具提示。

data-toggle属性指示在对此按钮执行操作时要触发的内容。 data-placement属性指定popover的位置。

data-content属性应包含要在popover中传达的内容。最后,设置title属性来为插件附加一个标头。

我们需要添加popoverButton类到按钮。

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript"
  src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".popoverButton").popover(); 
});
</script>
</head>
  <body style="margin:30px">
          <!-- Popover -->
          <button type="button" 
          class="btn btn-danger popoverButton" 
          data-toggle="popover" 
          data-placement="bottom" 
          data-content="Lorem Ipsum Donor." 
          title="This is a demo popover">
            Click Me!
          </button>
  </body>
</html>

触发弹出框

弹出框可以通过JavaScript触发。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("[data-toggle="popover"]").popover({
        placement : "top"
    });
});
</script>
<style type="text/css">
  .bs-example{
      margin: 150px 50px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <button type="button" class="btn btn-primary" data-toggle="popover" title="Popover title" data-content="Default popover">Popover</button>
    <button type="button" class="btn btn-success" data-toggle="popover" title="Popover title" data-content="Another popover">Another popover</button>
    <button type="button" class="btn btn-info" data-toggle="popover" title="Popover title" data-content="A larger popover to demonstrate the max-width of the Bootstrap popover.">Large popover</button>
    <button type="button" class="btn btn-warning" data-toggle="popover" title="Popover title" data-content="The last popover!">Last popover</button>
</div>
</body>
</html>

通过data属性定位弹出框

以下示例显示如何通过data属性设置弹出框的方向。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("[data-toggle="popover"]").popover();   
});
</script>
<style type="text/css">
  .bs-example{
      margin: 150px 50px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <button type="button" class="btn btn-primary" data-toggle="popover" data-placement="top" title="Popover title" data-content="Default popover">Popover on top</button>
    <button type="button" class="btn btn-success" data-toggle="popover" data-placement="right" title="Popover title" data-content="Popover on right.">Popover on right</button>
    <button type="button" class="btn btn-info" data-toggle="popover" data-placement="bottom" title="Popover title" data-content="Popover on bottom.">Popover on bottom</button>
    <button type="button" class="btn btn-warning" data-toggle="popover" data-placement="left" title="Popover title" data-content="Popover on left.">Popover on left</button>
</div>
</body>
</html>

通过JavaScript定位弹出框

以下示例显示如何通过JavaScript设置弹出框的方向。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".popover-top").popover({
        placement : "top"
    });
    $(".popover-right").popover({
        placement : "right"
    });
    $(".popover-bottom").popover({
        placement : "bottom"
    });
    $(".popover-left").popover({
        placement : "left"
    });
});
</script>
<style type="text/css">
  .bs-example{
      margin: 150px 50px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <button type="button" class="btn btn-primary popover-top" data-toggle="popover" title="Popover title" data-content="Default popover">Popover on top</button>
    <button type="button" class="btn btn-success popover-right" data-toggle="popover" title="Popover title" data-content="Popover on right.">Popover on right</button>
    <button type="button" class="btn btn-info popover-bottom" data-toggle="popover" title="Popover title" data-content="Popover on bottom.">Popover on bottom</button>
    <button type="button" class="btn btn-warning popover-left" data-toggle="popover" title="Popover title" data-content="Popover on left.">Popover on left</button>
</div>
</body>
</html>

在下一次点击时隐藏弹出框

默认情况下,在你再次单击触发元素之前,不会隐藏弹出框。当用户进行下一次点击时,我们可以使用焦点触发来隐藏弹出框。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("[data-toggle="popover"]").popover({
        placement : "top"
    });
});
</script>
<style type="text/css">
  .bs-example{
      margin: 150px 50px;
    }
    .popover-examples{
        margin-bottom: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="popover-examples">
        <a href="#" class="btn btn-primary" data-toggle="popover" tabindex="0" data-trigger="focus" title="Popover title" data-content="Default popover">Popover</a>
        <a href="#" class="btn btn-success" data-toggle="popover" tabindex="1" data-trigger="focus" title="Popover title" data-content="Another popover">Another popover</a>
        <a href="#" class="btn btn-info" data-toggle="popover" tabindex="2" data-trigger="focus" title="Popover title" data-content="A larger popover to demonstrate the max-width of the Bootstrap popover.">Large popover</a>
        <a href="#" class="btn btn-warning" data-toggle="popover" tabindex="3" data-trigger="focus" title="Popover title" data-content="The last tip!">Last popover</a>
    </div>
    <p><strong>Note:</strong> To hide the popover you can either click the next button or click outside.</p>
</div>
</body>
</html>

选项

我们可以为弹出框使用以下选项作。

名称 类型 默认值 描述
animation boolean布尔值 true 提供CSS渐变过渡效果。
html boolean布尔值 false 在弹出框中插入html。 如果为false,jQuery的text()方法将用于将内容插入到DOM中。
placement 字符串 | 函数 'right' 设置弹出框的位置 -  top | bottom | left | right | auto。
selector 字符串 false 如果提供了selector,弹出框对象将附加到指定的目标。
title 字符串 | 函数 " 如果title属性不存在,则设置默认标题值。
trigger 字符串 'click' 指定如何触发弹出框 - click | hover | focus | manual。
content 字符串 | 函数 " 如果“data-content”属性不显示,则设置默认内容值。
delay 数字| 对象 0 显示和隐藏弹出框的等待时间(ms)
container 字符串 | false false 将弹出框附加到特定的元素容器:“body”
template 字符串 '<div class='popover'>
<div class='arrow'></div><h3 class='popover-title'></h3><div class='popover-content'></div></div>'
创建弹出框时使用的基本HTML。
viewport 字符串 | 对象 { selector: 'body', padding: 0 } 将弹出框保持在此元素的边界内。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#myPopover").popover({
        title : "Default title value"
    });
});
</script>
<style type="text/css">
  .bs-example{
      margin: 50px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <button type="button" class="btn btn-primary btn-lg" 
            id="myPopover" data-toggle="popover" 
            data-content="And here"s some amazing content.">Popover Example</button>    
</div>
</body>
</html>

popover方法

以下代码显示如何使用.popover()方法。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".show-popover").click(function(){
       $("#myPopover").popover("show");
    });
    $(".hide-popover").click(function(){
       $("#myPopover").popover("hide");
    });
    $(".toggle-popover").click(function(){
       $("#myPopover").popover("toggle");
    });
    $(".destroy-popover").click(function(){
       $("#myPopover").popover("destroy");
    });
});
</script>
<style type="text/css">
  .bs-example{
      margin: 100px 50px;
    }
  .popover-examples{
    margin-bottom: 60px;
  }
</style>
</head>
<body>
<div class="bs-example">
    <div class="popover-examples">
        <button type="button" title="Popover title" class="btn btn-primary btn-lg" 
        id="myPopover" data-toggle="popover" 
        data-content="And here"s some amazing content. ">Popover Example</button>
    </div>
    <div class="popover-controls">
        <p>Click on the following buttons to control the popover manually.</p>
      <input type="button" class="btn btn-info show-popover" value="Show">
        <input type="button" class="btn btn-warning hide-popover" value="Hide">
        <input type="button" class="btn btn-success toggle-popover" value="Toogle">
        <input type="button" class="btn btn-danger destroy-popover" value="Destroy">
    </div>    
</div>
</body>
</html>

事件

下表列出了popover的事件。

事件 描述
show.bs.popover 当调用show instance方法时立即触发。
shown.bs.popover 当动画后弹出框对用户可见时触发。
hide.bs.popover 当hide实例方法被调用时立即触发。
hidden.bs.popover 当动画后弹出框对用户隐藏时触发。

以下示例在popover的淡出过渡已经完全完成时显示日志消息。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  // Initialize tooltip
    $("[data-toggle="popover"]").popover({
        placement : "top"
    });
  // Fire tooltip event
  $("[data-toggle="popover"]").on("hidden.bs.popover", function(){
        console.log("Popover has been completely closed. Click the button again to view the popover.");
    });
});
</script>
<style type="text/css">
  .bs-example{
      margin: 150px 50px;
    }
</style>
</head>
<body>
<div class="bs-example">
  <button type="button" class="btn btn-primary" data-toggle="popover" title="Popover title" data-content="Default popover">Popover</button>
  <button type="button" class="btn btn-success" data-toggle="popover" title="Popover title" data-content="Another popover">Another popover</button>
  <button type="button" class="btn btn-info" data-toggle="popover" title="Popover title" data-content="A larger popover to demonstrate the max-width of the Bootstrap popover.">Large popover</button>
  <button type="button" class="btn btn-warning" data-toggle="popover" title="Popover title" data-content="The last popover!">Last popover</button>
</div>
</body>
</html>
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号