如何讓自舉popover像谷歌應用程序啓動按鈕？

如何在bootstrap popover中製作一個範圍項目？我想讓它的確切一樣的谷歌應用程序啓動按鈕，如下圖：如何讓自舉popover像谷歌應用程序啓動按鈕？

我打得四處CSS和嘗試得到它儘可能接近，但似乎我做它一個錯誤的方式。 https://jsfiddle.net/ueskyj1u/

<!DOCTYPE html> 
    <html lang="en"> 

    <head> 
     <meta charset="UTF-8"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    </head> 
    <style type="text/css"> 
    @import "compass/css3"; 
    .popover-content { 
     overflow-y: scroll; 
     height: 200px; 
    } 

    .popover-footer { 
     margin: 0; 
     padding: 8px 14px; 
     font-size: 14px; 
     font-weight: 400; 
     line-height: 18px; 
     background-color: #F7F7F7; 
     border-bottom: 1px solid #EBEBEB; 
     border-radius: 5px 5px 0 0; 
    } 

    .flex-container { 
     padding: 0; 
     margin: 0; 
     list-style: none; 
     display: -webkit-box; 
     display: -moz-box; 
     display: -ms-flexbox; 
     display: -webkit-flex; 
     display: flex; 
     -webkit-flex-flow: row wrap; 
     justify-content: space-around; 
    } 

    .flex-item { 
     background: tomato; 
     /* padding: 13px;*/ 
     width: 74px; 
     ; 
     height: 83px; 
     margin-top: 2px; 
     color: white; 
     font-weight: bold; 
     font-size: 3em; 
     text-align: center; 
    } 


    /*---------------------*/ 

    #General { 
     background: #383a35; 
    } 

    #sale { 
     background: #ffde6b; 
    } 

    #Servicing { 
     background: #762963; 
    } 

    #Purchasing { 
     background: #22d65b; 
    } 

    #Billing { 
     background: #67a0e1; 
    } 

    #Accounts { 
     background: #a22ee3; 
    } 

    #GST { 
     background: #39c5ac; 
    } 

    #StockControl { 
     background: #ef5836; 
    } 

    #System { 
     background: #69cbf5; 
    } 
    </style> 

    <body> 
     <div> 

      <!--    <div class="flex-container"> 
        <div id="General" class="flex-item"> 1 
         <div class="glyphicon glyphicon-envelope"> </div> 
        </div> 
        <div id="sale" class="flex-item"> 
         <div class=" glyphicon glyphicon-ok"> </div> 2</div> 
        <div id="Servicing" class="flex-item"> 
         <div class="glyphicon glyphicon-globe "> </div> 3</div> 
        <div id="Purchasing" class="flex-item"> 
         <div class="glyphicon glyphicon-envelope"> </div> 4</div> 
        <div id="Billing" class="flex-item"> 
         <div class=" glyphicon glyphicon-usd"> </div> 5</div> 
        <div id="Accounts" class="flex-item"> 
         <div class=" glyphicon glyphicon-user"> </div> 6</div> 
        <div id="GST" class="flex-item"> 
         <div class=" glyphicon glyphicon-stats"> </div> 7</div> 
        <div id="StockControl" class="flex-item"> 
         <div class="glyphicon glyphicon-envelope"> </div> 8</div> 
        <div id="StockControl" class="flex-item"> 
         <div class="glyphicon glyphicon-cog"> </div> 8</div> 
       </div> 
     --> 
     </div> 
     <a href="#" rel="details" class="btn btn-small pull-left" data-toggle="popover">click me to see popover</a> 
     <script type="text/javascript"> 
     $("[rel=details]").popover({ 
      trigger: 'click', 
      placement: 'bottom', 
      html: 'true', 
      content: '<div class="flex-container"><div id="General" class="flex-item"> 1<div class="glyphicon glyphicon-envelope"></div></div><div id="sale" class="flex-item"><div class=" glyphicon glyphicon-ok"> </div> 2</div><div id="Servicing" class="flex-item"><div class="glyphicon glyphicon-globe "> </div> 3</div><div id="Purchasing" class="flex-item"><div class="glyphicon glyphicon-envelope"></div>4</div><div id="Billing" class="flex-item"><div class=" glyphicon glyphicon-usd"> </div> 5</div><div id="Accounts" class="flex-item"><div class=" glyphicon glyphicon-user"> </div>6</div><div id="GST" class="flex-item"><div class=" glyphicon glyphicon-stats"> </div>7</div><div id="StockControl" class="flex-item"><div class="glyphicon glyphicon-envelope"></div> 8</div><div id="StockControl" class="flex-item"><div class="glyphicon glyphicon-cog"> </div> 8</div></div>', 

      template: '<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' 
     }); 
     </script> 
    </body> 

    </html>

來源

2015-12-17 mr chon

，就應該替換文本您的非代碼部分，用你的實際代碼。你的JSFiddle鏈接並不是一個鏈接，因此會讓大多數用戶惱火（在我看來）。 – Lee

我剛剛注意到，修正了 –

在彈出的模板做改變

<div class="popover"> 
    <div class="arrow"></div> 
    <h3 class="popover-title"></h3> 
    <div class="popover-content"></div> 
    <div class="footer"> 
     <center> 
      <a href="" >more</a> 
     </center> 
    </div> 
</div>

添加類

.footer{ 
     width: 101%; 
    margin-left: -0.5%; 
    background-color:rgba(128, 128, 128, 0.48); 
    margin-bottom:-1%; 
    border-bottom-right-radius: 16%; 
    border-bottom-left-radius: 16%; 
}

https://jsfiddle.net/ueskyj1u/1/

來源

2015-12-17 10:38:12

如何讓自舉popover像谷歌應用程序啓動按鈕？

回答

相關問題