我基于这个例子: https ://jsfiddle.net/hL0pvaty/
但是弹出窗口必须包含一个 html div ,因此,我想要的是第一个和第二个链接之间的混合: https ://maxalley.wordpress.com/2014/08/19/bootstrap-3-popover-with-html -内容/
这是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 文件有一个打开弹出框的图像链接(我正在使用 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>"
}
]
这是使用引导表加载 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>
你可以帮帮我吗?
谢谢,