閱讀(5.7k) 書簽贊(1) 我要糾錯

Bootstrap 彈出框

2018-03-18 14:38 更新

彈出框（Popovers）就像工具提示（tooltips），但更大，更流行。你可以在彈出框中放置比工具提示更多的內(nèi)容。當(dāng)你有更多的HTML內(nèi)容或文本內(nèi)容顯示時(shí)，建議使用彈出框而不是工具提示。

data-toggle屬性指示在對此按鈕執(zhí)行操作時(shí)要觸發(fā)的內(nèi)容。 data-placement屬性指定popover的位置。

data-content屬性應(yīng)包含要在popover中傳達(dá)的內(nèi)容。最后，設(shè)置title屬性來為插件附加一個(gè)標(biāo)頭。

我們需要添加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>

觸發(fā)彈出框

彈出框可以通過JavaScript觸發(fā)。

<!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屬性設(shè)置彈出框的方向。

<!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設(shè)置彈出框的方向。

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

在下一次點(diǎn)擊時(shí)隱藏彈出框

默認(rèn)情況下，在你再次單擊觸發(fā)元素之前，不會隱藏彈出框。當(dāng)用戶進(jìn)行下一次點(diǎn)擊時(shí)，我們可以使用焦點(diǎn)觸發(fā)來隱藏彈出框。

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

選項(xiàng)

我們可以為彈出框使用以下選項(xiàng)作。

名稱	類型	默認(rèn)值	描述
animation	boolean布爾值	true	提供CSS漸變過渡效果。
html	boolean布爾值	false	在彈出框中插入html。如果為false，jQuery的text()方法將用于將內(nèi)容插入到DOM中。
placement	字符串 \| 函數(shù)	'right'	設(shè)置彈出框的位置 - top \| bottom \| left \| right \| auto。
selector	字符串	false	如果提供了selector，彈出框?qū)ο髮⒏郊拥街付ǖ哪繕?biāo)。
title	字符串 \| 函數(shù)	"	如果title屬性不存在，則設(shè)置默認(rèn)標(biāo)題值。
trigger	字符串	'click'	指定如何觸發(fā)彈出框 - click \| hover \| focus \| manual。
content	字符串 \| 函數(shù)	"	如果“data-content”屬性不顯示，則設(shè)置默認(rèn)內(nèi)容值。
delay	數(shù)字\| 對象	0	顯示和隱藏彈出框的等待時(shí)間（ms）
container	字符串 \| false	false	將彈出框附加到特定的元素容器：“body”
template	字符串	`'<div class='popover'> <div class='arrow'></div><h3 class='popover-title'></h3><div class='popover-content'></div></div>'`	創(chuàng)建彈出框時(shí)使用的基本HTML。
viewport	字符串 \| 對象	`{ selector: 'body', padding: 0 }`	將彈出框保持在此元素的邊界內(nèi)。

<!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	當(dāng)調(diào)用show instance方法時(shí)立即觸發(fā)。
shown.bs.popover	當(dāng)動畫后彈出框?qū)τ脩艨梢姇r(shí)觸發(fā)。
hide.bs.popover	當(dāng)hide實(shí)例方法被調(diào)用時(shí)立即觸發(fā)。
hidden.bs.popover	當(dāng)動畫后彈出框?qū)τ脩綦[藏時(shí)觸發(fā)。

以下示例在popover的淡出過渡已經(jīng)完全完成時(shí)顯示日志消息。

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

以上內(nèi)容是否對您有幫助：

← Bootstrap 元素固定定位

Bootstrap <pre>標(biāo)簽 →

寫筆記

我要補(bǔ)充

Bootstrap 彈出框

觸發(fā)彈出框

通過data屬性定位彈出框

通過JavaScript定位彈出框

在下一次點(diǎn)擊時(shí)隱藏彈出框

選項(xiàng)

popover方法

事件

推薦文章

推薦教程

推薦課程