我的基础是这个例子：https://jsfiddle.net/hL0pvaty/
但是popover必须包含一个html div，因此，我想要的是第一个和第二个链接之间的混合：https://maxalley.wordpress.com/2014/08/19/bootstrap-3-popover-with-html-content/
这是js代码：
$(document).on("click", ".show-popover-div", function (e) {
$('[rel="popover"]').popover({
container: 'body',
html: true,
content: function () {
var clone = $($(this).data('popover-content')).clone(true).removeClass('hide');
return clone;
}
}).click(function(e) {
e.preventDefault();
});
});
这有效，但迫使我双击链接，只需点击一下即可。
有一件事，这个例子非常好，但我需要应用一些更改，我想要相同的，但从链接，我打开一个加载json文件的模态窗口，
json文件有一个打开popover的图像链接，就像你给我看的那样（我使用bootstrap-table来加载json文件）
这是json文件：
[
{
"col1": "<a href='#'>13560431</a>",
"col2": "<a href='#' class='popup-window' data-placement='left'><img src='img/ico_add_td.png' /></a>"
},
{
"col1": "<a href='#'>44560422</a>",
"col2": "<a href='#' class='popup-window' data-placement='left'><img src='img/ico_add_td.png' /></a>"
}
]
这是使用bootstrap-table加载json文件的js代码：
$("#table-alert2").bootstrapTable({
url: 'data-table-alert2b.json',
columns: [{
field: 'col1'
}, {
field: 'col2'
}, ]
});
这是div链接html和模态窗口：
<div style="width: 200px; background-color: #ccc; text-align: center;" data-toggle="modal" data-target="#myModalReguOpor">
<div>Regulatorias</div>
<div>7</div>
</div>
<!-- Modal regulatorias -->
<div class="modal fade bs-example-modal-lg" id="myModalReguOpor" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<table id="table-alert2" class="table table-striped"></table>
</div>
</div>
</div>
<div class="modal-footer">
<input id="cancel" type="button" data-dismiss="modal" value="Cerrar" />
</div>
</div>
</div>
</div>
你可以帮帮我吗？
谢谢，
标准化引导弹出窗口有一个代码：
看看demo
源代码download
$( document ).ready(function() {
$('.popup-window').popover({
html: true,
title : '<button type="button" class="close" onclick="$(".popup-window").popover("hide");">×</button>',
trigger: 'manual',
content: function () {
return $(this).next('.popup-content').html();
}
}).click(function(e) {
$(this).popover('toggle');
$('.popup-window').not(this).popover('hide');
e.stopPropagation();
});
$('body').on('click', function (e) {
$('.popup-window').each(function () {
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
$(this).popover('hide');
}
});
});
和HTML
<div class="actions">
<!-- Action -->
<div class="popup-window" data-placement='left'>
<i title='Share' class="btn-popup fa fa-share-alt"></i>
</div>
<div class="popup-content hide">
<div class="socialShare">
<label class="form-group">Share:</label>
<div class="well">
<a title="Share on twiiter" target="_blank" href="#">
<i style="font-size: 40px;" class="fa fa-twitter-square"></i>
</a>
<a title="Share on facebook" target="_blank" href="#">
<i style="font-size: 40px;" class="fa fa-facebook-square"></i>
</a>
</div>
</div>
</div>
<!-- Action -->
<div class="popup-window" data-placement='bottom'>
<i title='Respond To Review' class="btn-popup fa fa-share-square-o"></i>
</div>
<div class="popup-content hide">
<div class="">
<label class="form-group">Respond To Review:</label>
<div class="form-group">
<textarea class="form-control">Great song BRO!</textarea>
</div>
<div class="form-group">
<button class="btn btn-primary respondToReview width100" onclick="respondToReview(this);">Post Response</button>
</div>
</div>
</div>
</div>
和css
.actions .popover-content {
padding: 20px 40px;
}
.actions .popup-window,
.action-link {
display: inline-block;
margin-right: 5px;
line-height: 20px;
border-radius: 5px;
padding: 7px;
width: 34px;
height: 34px;
background-color: #2fa0e5;
color: #fff;
cursor: pointer;
}
.actions .popup-window:hover,
.actions .popup-window:focus,
.action-link:hover,
.action-link:focus {
opacity: 0.85;
}
.action-link:last-child,
.actions .popup-window:last-child {
margin-right: 0;
}
.btn-popup.fa {
font-size: 20px;
cursor: pointer;
}
.actions .popover-title {
background-color: transparent;
border-color: transparent;
float: right;
}
.actions .popover-content .form-group:first-child {
margin-top: 10px;
}
.actions .popover-content .well {
background-color: transparent;
border-color: transparent;
margin-bottom: 0;
padding-left: 0;
padding-right: 0;
box-shadow: none;
}
.actions .popover-content .well a {
margin: 0 10px 0 0;
}
///HTML
<div id="btnSave_popover" class="div-popover">
///HTML content here
</div>
///Css classes for popover
.div-popover {
background-color: white;
border-radius: 8px !important;
box-shadow: -1px 1px 9px 5px rgba(0,0,0,0.4);
font-size: 12px;
padding: 7px 10px;
position: absolute;
width: 250px;
bottom: -4px;
}
.div-popover:after {
content: "";
position: absolute;
bottom: -10px;
left: 175px;
border-style: solid;
border-width: 25px 25px 0;
border-color: #FFFFFF transparent;
}
.hidden {
display: none !important;
}
///JQuery for button click
$("#btnSave").click(function () {
if ($("#btnSave_popover").hasClass("hidden")) {
$("#btnSave_popover").removeClass("hidden");
} else {
$("#btnSave_popover").addClass("hidden");
}
});