Bootstrap 3-Popover div HTML [英] Bootstrap 3 - Popover div html
问题描述
我基于此示例：
https://jsfiddle.net/hL0pvaty/
但是弹出窗口必须包含html div，因此，我想要的是第一个和第二个链接之间的混合：
https://maxalley.wordpress.com/2014/08/19/bootstrap -3-popover-with-html-content /
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/
这是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();
});
});
此方法有效，但迫使我双击该链接，并且只应使用一个单击。
This works, but forces me to make double-click the link, and it should work with just one click.
一件事，这个示例很好，但是我需要应用一些更改，我想要相同，但是从链接中，我打开了一个加载的模态窗口一个json文件，
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,
该json文件具有打开弹出窗口的图像链接，正如您向我展示的那样（我正在使用bootstrap-table加载json文件）
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)
这是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：
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'
}, ]
});
这是div链接html和模式窗口：
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>
您能帮我吗？
谢谢，
推荐答案
有一个规范化自举程序弹出窗口的代码：
There is a code for normalization bootstrap popovers:
-
乘以弹出窗口
multiply popovers
具有关闭按钮的弹出窗口
popovers with close button
在弹出窗口外单击关闭
带有自定义HTML的弹出窗口
popover with custom HTML
查看演示
源代码下载
$( 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;
}
这篇关于Bootstrap 3-Popover div HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
