阅读(5.7k) 书签赞(1) 我要纠错

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()方法。

<!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>

以上内容是否对您有帮助：

← Bootstrap 元素固定定位

Bootstrap <pre>标签 →

写笔记

我要补充

Bootstrap 弹出框

触发弹出框

通过data属性定位弹出框

通过JavaScript定位弹出框

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

选项

popover方法

事件

推荐文章

推荐教程

推荐课程