Я основывался в этом примере: 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>"
}
]
Этот код js для загрузки json файла с помощью начальной загрузки:
$("#table-alert2").bootstrapTable({
url: 'data-table-alert2b.json',
columns: [{
field: 'col1'
}, {
field: 'col2'
}, ]
});
Это окно html и модальное окно div:
<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>
Не могли бы вы мне помочь?
Спасибо,