Django popover點選彈框外消失
阿新 • • 發佈:2019-01-05
控制元件程式碼
<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'); // 然後只把自己開啟。
});