控件代码
<button rel="popover" data-content="{{item.remark}}" data-html="true" class="pop">详情</button>
item.remark是django的方式,调用python中class的remark属性。
弹框代码
<script type="text/javascript"> $(document).ready( function(){ $(".pop").popover({placement:'right', trigger:'manual', delay: {show: 100, hide: 100}, content: function () { return ("#data-content"); // 把content变成html }}); $('body').click(function (event) { var target = $(event.target); // 判断自己当前点击的内容 if (!target.hasClass('popover') && !target.hasClass('pop') && !target.hasClass('popover-content') && !target.hasClass('popover-title') && !target.hasClass('arrow')) { $('.pop').popover('hide'); // 当点击body的非弹出框相关的内容的时候,关闭所有popover } }); $(".pop").click(function (event) { $('.pop').popover('hide'); // 当点击一个按钮的时候把其他的所有内容先关闭。 $(this).popover('toggle'); // 然后只把自己打开。 }); } );*/ </script>
注意要事先导入bootstrap/js/bootstrap.min.js文件,网上下载,放到合适的路径下即可。
新增:
$(".pop").click(function (event) { var s = "你好"//对content赋值 $(this).attr('data-content', s); $('.pop').popover('hide'); // 当点击一个按钮的时候把其他的所有内容先关闭。 $(this).popover('toggle'); // 然后只把自己打开。 });