【发布时间】：2016-03-14 14:47:57
【问题描述】：
这是我正在使用的代码
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 按钮是否能够正常工作？只有当鼠标点击发生在按钮标签所在的中间区域时，我的“竞价”按钮才会打开弹出框。
【问题讨论】：
-
请提供您的代码minimal reproducible example。使用 sn-p 工具（
<>符号）编辑您的问题，链接所需的资源，以便我们可以在这里遇到问题。或者，您可以使用 jsFiddle 或 codepen 或其他在线 sn-p 工具。另外，我看到您正在声明您添加的脚本，这显然是jQuery是AngularJS。你没有在你的项目中包括，也没有使用AngularJS。AngularJS不是JavaScript的另一个名称。它是一个独特的库，具有不同的语法和不同的方法，您没有使用。
标签： html css angularjs twitter-bootstrap-3