问题
I based in this example: https://jsfiddle.net/hL0pvaty/
But the popover must contain a html div , therefore, what I want is a mixture between the first and the second link: https://maxalley.wordpress.com/2014/08/19/bootstrap-3-popover-with-html-content/
This is the js code:
$(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();
});
});
This works, but forces me to make double-click the link, and it should work with just one click.
One thing, this example is very ok, but i need apply some changes, i want the same, but from a link, i open one modal window that loaded a json file,
The json file have a image links that open the popover, as you have shown me (i am using bootstrap-table for to load the json file)
This is the json file:
[
{
"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>"
}
]
This the js code for to load json file with bootstrap-table:
$("#table-alert2").bootstrapTable({
url: 'data-table-alert2b.json',
columns: [{
field: 'col1'
}, {
field: 'col2'
}, ]
});
This is the div link html and modal window:
<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>
Could you help me?
Thanks,
回答1:
There is a code for normalization bootstrap popovers:
multiply popovers
popovers with close button
close by click outside the popover
popover with custom HTML
Check out the demo
Source code 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');
}
});
});
and 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>
and 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;
}
回答2:
///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");
}
});
来源：https://stackoverflow.com/questions/33635046/bootstrap-3-popover-div-html