Question

这是我正在使用

的代码

HTML

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

    <title>Place Bid</title>

    <!-- Bootstrap -->
    <link href="../stylesheets/bootstrap.min.css" rel="stylesheet">
    <link href="popover.css" rel="stylesheet">

  </head>
  <body>

<div class="container">
  <ul class="list-unstyled">
    <button class ="bidpopover"><a data-placement="bottom" data-toggle="popover" data-title="Place Bid" data-container="body" type="button" data-html="true" href="#" id="bid">Place Bid</a></button>
    <div id="popover-content" class="hide">
      <form class="form-inline" role="form">
        <div class="form-group">
            <div class="input-group" type ="wage">
                <span class="input-group-addon">$</span>
                <input type="text" class="form-control"/>
            </div>
          <br><br>
          <button type="submit" class="btn btn-primary">Submit</button>    
          <button type="cancel" class="btn btn-primary">Cancel</button>                               
        </div>
      </form>
    </div>
  </ul>
</div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <!-- Popover UI functionalities-->
    <script src="popover.js"></script>
  </body>
</html>

CSS

.grey-box     /* background of popover box*/
    {
        background-color: gray;
        height: 200px;
        margin-bottom: 10px;
        font-size: 2em;
        text-align: center;
        padding: 80px;
    }
  .form-control { /* popover text field*/
    width:120px;
  }
  .popover { /* popover responsiveness*/
    max-width:300px;
  }
  button[type="submit"]{ /* Submit button */
    border: 0;
    padding: 8px;
    background: #45AD00;
    color: white;
    border-radius: 5px;
    margin-left: 20px;
    margin-right: 30px;
  }
  button[type="cancel"]{ /* Cancel button */
    border: 0;
    padding: 8px;
    background: #FC3838;
    color: white;
    border-radius: 5px;
    margin-right: 20px;
  }
  .bidpopover{ /* Place Bid button*/
    margin-top: 50px;
    padding: 6px;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    background-color: white;
    border: 2px solid #4CAF50;
    border-radius: 5px;

  }
   .bidpopover:hover { /* hovering over "Place Bid" button */
    background-color: #4CAF50;
    color: white;
  }

ANGULAR.JS *

    $( function() /* popover action */
    {
        $("[data-toggle=popover]").popover({
      html: true, 
      content: function() {
          return $('#popover-content').html();
        }
      });
    } );

    $('body').on('click', function (e) { /* closes popover when clicked outside of it */
    //only buttons
    if ($(e.target).data('toggle') !== 'popover'
        && $(e.target).parents('.popover.in').length === 0) { 
        $('[data-toggle="popover"]').popover('hide');
    }
});

我通过浏览器运行它，只有鼠标点击在弹出框上方完成后，弹出窗口才会起作用。还有一个侧面说明，HTML按钮是否能够在按钮上的任何位置点击而不仅仅是按钮标签？我的＆＃34;出价＆＃34;如果鼠标单击特定位于按钮标签所在的中间区域，则按钮仅打开弹出窗口。

Answer 1

首先，不建议在<a> s内放置<button>个标签我已将popover功能转移到<button>。还有一些其他小问题，一些与HTML标记相关，一些与CSS相关，我清理并加上前缀。

我还修复了jQuery代码中的逻辑错误，该错误阻止了弹出窗口在popover之外点击关闭后首次点击时打开。

我将popover箭头的颜色与popover标题的背景颜色相同（我从未理解为什么它不是默认值，因为底部的弹出框将始终在其标题旁边有箭头。）

jsFiddle

干杯！

如果未在其上方单击，则隐藏Bootstrap popover

1 个答案: